Filter, Sort & Arrow Functions
14/09/2017
Vamos dar uma volta e conhecer alguns métodos nativos do JavaScript que são muito úteis.
read article →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
Poupe tempo com gulp-changed
09/11/2017
Ao utilizarmos um automatizador de tarefas front-end em projetos que dispõe de muitos assets, lidamos com o excessivo tempo que a operação leva a ser concluída.
read article →