Manipulando contextos com o método Bind

03/10/2017

Ao construirmos uma aplicação em JavaScript, comumente nos deparamos com o seguinte:

var carro = {
    som: 'Vrrrrummm',
    ligarMotor: function() {
        setTimeout(function() {
            console.log(this.som);
        }, 2000)
    }
};

carro.ligarMotor(); // undefined  

No exemplo acima, this é contexto do método setTimeout e não do objeto carro. Portanto this.som é indefinido.

Uma técnica utilizada anteriormente, era atribuir o contexto para uma nova variável:

var self = this;

Com isso, a variável self guardava um contexto para ser utilizado em novos contextos.

Mas podemos fazer da maneira correta utilizando o método bind. Por trás dos panos, ele invoca uma nova função vinculando um contexto para a função desejada.

Nosso exemplo então ficaria assim:

var carro = {
     som: 'Vrrrrummm',
     ligarMotor: function() {
         setTimeout(function() {
             console.log(this.som);
         }.bind(this), 2000)
     }
};

Agora ao executarmos o método ligarMotor do objeto carro, ele exibe sua propriedade som:

carro.ligarMotor(); // Vrrrrummm


Ecmascript 2015

Visto que o primeiro argumento do método setTimeout é uma função anônima e precisamos vincular o valor this a ela, podemos tomar proveito da expressão arrow function que dispõe dessas duas características, não sendo mais necessário o uso do método bind em nossa situação:

let carro = {
     som: 'Vrrrrummm',
     ligarMotor: function(){
         setTimeout(() => console.log(this.som), 2000)
     }
};

Similar articles

see all articles