1
resposta

Notação em javascript this

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.

1 resposta

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.