2

O contexto no qual essa arrow foi criada foi diretamente no método setInterval, porém o this aponta para a idade dentro do objeto Pessoa, por quê? O this no arrow é baseado no contexto em que foi escrito, no caso o contexto de uma função chamada setInterval, certo?

function Pessoa(){
    this.idade = 0

    setInterval(() => {
        this.idade++
        console.log(this.idade)
    },1000)
}

new Pessoa();

O segundo caso é o porquê de ter que usar bind no mesmo código sem arrow? Como é uma função, por que não aponta para o objeto que está criando ela?

console.log(this === window);

function Pessoa(){
    this.idade = 0;

    setInterval(function(){
        this.idade++
        console.log(this.idade)
    }.bind(this),1000);
}

new Pessoa();

0

1 Resposta 1

1

Isso está explicado na documentação:

Code executed by setInterval() runs in a separate execution context than the function from which it was called. As a consequence, the this keyword for the called function is set to the window (or global) object, it is not the same as the this value for the function that called setTimeout.

Em tradução livre:

O código executado por setInterval roda em um contexto separado da função onde ele foi chamado. Consequentemente, o this da função chamada é setado para o objeto window (ou global), e não é o mesmo this da função que chamou setTimeout.

Podemos ver esse comportamento alterando um pouco o seu exemplo:

var x = 0, id = 0;
function Pessoa(){
    this.idade = 0;

    id = setInterval(function() {
        this.idade++;
        console.log(this == window, this.idade); // true NaN
        // só pra não ficar executando eternamente
        if (x++ >= 2) clearInterval(id);
    }, 1000);
}

new Pessoa();

Rodando em um browser, o this será igual a window, conforme dito na documentação. E como window.idade não foi definido (pois na linha this.idade = 0, o this refere-se à Pessoa), então dentro da função o valor de this.idade é undefined, já que ele está tentando pegar window.idade.


Já usando arrow function, o this não é alterado desta maneira, e refere-se à própria Pessoa:

var x = 0, id = 0;
function Pessoa(){
    this.idade = 0;

    id = setInterval(() => {
        this.idade++;
        console.log(this == window, this, this.idade); // false { "idade": valor } valor da idade 
        // só pra não ficar executando eternamente
        if (x++ >= 2) clearInterval(id);
    }, 1000);
}

new Pessoa();


E usando bind também funciona, pois o retorno de bind é uma função igual à original, mas com o this setado para o valor indicado:

var x = 0, id = 0;
function Pessoa(){
    this.idade = 0;

    id = setInterval(function() {
        this.idade++;
        console.log(this == window, this, this.idade); // false { "idade": valor } valor da idade 
        // só pra não ficar executando eternamente
        if (x++ >= 2) clearInterval(id);
    }.bind(this), 1000);
}

new Pessoa();

No caso, .bind(this) está fora da função anônima, então naquele ponto o this refere-se a Pessoa. Ou seja, o bind retornou uma função igual à função anônima, mas com o this setado para a Pessoa.


O que confunde nos casos acima é que a cada momento o this pode representar uma coisa diferente. É confuso mesmo:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .