Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

Manipulando contextos com o método Bind

03 de Outubro de 2017
Ao construirmos uma aplicação em JavaScript, quase sempre nos deparamos com a seguinte situação:

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ísticasnã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)
}
}

© 2006 - 2017