13

Cenário:

class ClassName {

    constructor(service, params) {
        this.service = service;
        this.params = params;

        this.save(params.id);
    }

    save(id) {
        const { service, onSuccess, onError } = this;

        return service.save({ id }).then(onSuccess, onError);
    }

    onSuccess() {
        //do something
    }

    onError() {
        //do something
    }
}

Explicação:

No contructor os parâmetros são recebidos e atribuídos ao this ocorrendo também a chamada da função save.

Durante a função save os valores de this são extraídos em const e o service save é executado retornando a função onSuccess, ou, em caso de falha, a função onError.

Problema:

As funções OnSuccess e onError não são executadas após o retorno do service (aparecem como "undefined" durante a execução de TDD), por perda de referência.

Uma solução encontrada:

Chamar as funções onSuccess e onError com arrow function da seguinte forma:

.then(() => this.onSuccess(), () => this.onError());

As dúvida são:

  • Por que ocorreu essa perda de referência?
  • Por que a utilização de arrow functions sanou o problema?
  • Haveria outra forma de contornar essa perda de referência no exemplo acima?
10
  • Boa tarde Dorival, apenas para esclarecer: as funções onSuccess e onError não estão sendo executadas, ou são executadas sem a referência da classe?
    – luiscrjr
    Commented 18/01/2017 às 13:50
  • Boa tarde @mrlew, as funções não são executadas no primeiro caso por falta de referência, o que não acontece no segundo com o uso de arrow function, sendo assim, neste segundo caso elas executam normalmente. Mas, exitem casos em que funções podem ser executadas sem referência? Commented 18/01/2017 às 13:57
  • 1
    Pergunta interessante! Relacionada com: pt.stackoverflow.com/a/108745/129. Estou com pressa mas respondo mais logo.
    – Sergio
    Commented 18/01/2017 às 15:49
  • Beleza! Fico no aguardo e obrigado por compartilhar o link Sergio Commented 18/01/2017 às 15:53
  • @DorivalZanetto o seu service está retornando uma Promise conforme a documento no developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… ? Pois fiz um teste e o resultado foi esperado conforme o cenário original.
    – dikey
    Commented 18/01/2017 às 16:25

2 Respostas 2

6

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.

0
-2

O código do cenário está correto, não deveria haver perda de referência se o serviço implementar corretamente o Promise conforme a padronização do es6. Assim para usar o then(), o método save() da classe service deve retornar um objeto Promise. A documentação do Mozilla tem um boa explicação. Provavelmente pode existir algum problema na implementação do objeto Promise retornado pelo service ou na chamada da função de onSuccess ou onError.

Exemplo:

class MyService {

  save(id) {

     console.log("Saving "+id);
     return Promise.resolve("Record id "+id+" saved!");

  }

}

Abaixo um link com o exemplo funcionando que funciona caso o navegador implementar o es6.

Observação: Veja neste link a lista de navegadores implementam a especificação es6. Se o navegador não suportar a especificação do Promise é possível adicionar um pollyfill.

3
  • O problema é que esses métodos onSucess e onError são chamados com um contexto de execução que já não é a classe. Dá uma olhada aqui: jsfiddle.net/g5nj3cn9/4 e ao erro que isso gera por falta de .bind(this)
    – Sergio
    Commented 18/01/2017 às 21:43
  • @Sergio concordo com você, caso se tivesse especificado os métodos onSuccess e onError. Ocorre que o desenvolvedor com menos conhecimento veria como obrigatório a necessidade de se utilizar as arrow functions em qualquer then() de uma Promise. O código apresentado não possui nenhuma necessidade de adição desse recurso. Acredito que a pergunta deveria ser editada para melhor esclarecimento dos usuários.
    – dikey
    Commented 19/01/2017 às 0:17
  • @DorivalZanetto é quebrado mesmo, para mostrar que o this é errado. Fiz assim quebrado de propósito, só para exemplo.
    – Sergio
    Commented 19/01/2017 às 11:12

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 .