Boa noite, tenho visto em alguns projetos a seguinte notação
var _this = this ;
gostaria de entender qual funcionalidade de declarar uma variável que recebe o this , sendo que o this é uma forma de referenciar os elementos do objeto DOM.
Boa noite, tenho visto em alguns projetos a seguinte notação
var _this = this ;
gostaria de entender qual funcionalidade de declarar uma variável que recebe o this , sendo que o this é uma forma de referenciar os elementos do objeto DOM.
O this é um tópico avançado tratando-se de javascript, é muito comum programadores experientes na linguagem se confundirem ao utilizar esta keyword. Te aconselho a ler a documentação a respeito do this segue o link abaixo:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this
Referente a sua dúvida, segue abaixo um exemplo para utilização do var _this = this:
document.querySelector("body").addEventListener("click", function(){
this.nome = "é o body aqui"
chamaCallback(function() {
console.log(this.nome)
});
});
function chamaCallback(callback) {
this.nome = "é o chamaCallback";
console.log("chamando callback...");
callback();
}
A função chamaCallback recebe como parâmetro uma função, e dentro do chamaCallback é atribuído ao this.nome o valor "é o chamaCallback", perceba que esse this é referente a função chamaCallback. Posteriormente é logado a frase "chamando callback..." e depois executado o callback.
Dentro do callback da função addEventListener eu também atribuo um nome ao objeto atual, neste caso o body, e depois chamo a função chamaCalback passando uma função como parâmetro, no qual esta função basicamente loga o nome do objeto do escopo atual.
Você irá perceber que ao executar este código o que aparece na tela ao logar o nome é a frase: é o chamaCallback, pois a função que foi passada como parâmetro ao chamaCallback é executada no seu próprio escopo, ou seja, o this sera referente a função chamaCallback. Para contornar isso, pode ser criada a variável _this, conforme segue o código abaixo:
document.querySelector("body").addEventListener("click", function(){
this.nome = "é o body aqui"
var _this = this;
chamaCallback(function() {
console.log(_this.nome)
});
});
function chamaCallback(callback) {
this.nome = "é o chamaCallback";
console.log("chamando callback...");
callback();
}
Desta forma o que sera logado na tela é a frase é o body aqui.