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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.