Isso é um problema comum, que pode resolver-se com arrow functions ou com .bind()
.
Resumido:
a) Porque ocorreu essa perda de referência?
Quando corremos uma função como callback de uma Promise o contexto de execução (o this
) muda para undefined
ou o objeto global (window
no browser).
b) Por que a utilização de arrow functions sanou o problema?
Essa é uma das novidades (nova possibilidade) com arrow function, ela corre no contexto de onde é declarada.
c) Haveria outra forma de contornar essa perda de referência no exemplo acima?
Sim, podes usar o .bind()
para forçar o contexto de execução. O .bind()
cria uma cópia da função, sem a invocar, e quando ela fôr chamada corre com o contexto defenido no .bind(contexto)
.
Exemplo:
return service.save({ id }).then(this.onSuccess.bind(this), this.onError.bind(this));
Explicação mais alongada:
O contexto de execução de uma função depende de várias coisas. Regra geral diz-se que o contexto de execução é o objeto/classe ao qual a função pertence. Falei sobre isso noutra pergunta. No caso de funções normais um exemplo pode ser:
Exemplo:
function teste() {
console.log('contexto de teste é foo?:', this == 'foo');
log();
}
function log() {
console.log('contexto de log é foo?:', this == 'foo');
}
teste.call('foo');
Apesar da função teste
correr num contexto próprio, log
vai correr no contexto de execução window
.
Funções passadas como callback a uma Promise são executados noutro contexto de execução. Assim, passar uma função como callback para o .then()
não garante o contexto de execução. Isso não se aplica a arrow functions declaradas inline.
A Promise têm dois modos de operar no que diz respeito ao contexto de execução da callback:
- se estiver em
strict mode
Caso estejamos em strict mode
ou a função usada como callback implemente strict mode
, então o this
será undefined
. Este é o teu caso, pois métodos de classes ES6 correm sempre em strict mode
.
- se não estiver em
strict mode
Caso não estejamos em strict mode
nem a função usada como callback implemente strict mode
, então o contexto de execução será o objeto global, window no caso do browser.
class Classe {
constructor(){
this.teste();
Promise.resolve().then(this.teste);
}
teste() {
console.log(this);
}
}
new Classe();
b) Por que a utilização de arrow functions sanou o problema?
Esta é uma das vantagens e diferenças entre funções que já conhecemos, declaradas com function
. A arrow function vai sempre ter como contexto de execução o contexto envolvente onde está inserida.
Exemplo:
class Classe {
constructor() {
const logA = () => {
console.log('logA', this);
};
const logB = function() {
console.log('logB', this);
}
logA();
logB();
}
}
const logC = () => {
console.log('logC', this);
};
const logD = function() {
console.log('logD', this);
}
new Classe();
logC();
logD();
Neste exemplo (jsFiddle) os resultados são:
logA // dá Classe {}
logB // undefined
logC // window
logD // undefined
Ou seja, arrow functions usam o contexto à sua volta, enquanto que funções "à moda antiga" recebem o contexto do objeto a que pertencem.
onSuccess
eonError
não estão sendo executadas, ou são executadas sem a referência da classe?