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: