Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Arrow function em substituição de function em um objeto Proxy

Pessoal, não entendi muito bem o porque eu não posso usar uma arrow function no código abaixo:

this._listaNegociacoes = new Proxy(new ListaNegociacoes(), {

            get (target, prop, receiver) {
                if (['adiciona', 'esvazia'].includes(prop) && typeof(target[prop]) == typeof(Function)) {
                    return () => {

                        Reflect.apply(target[prop], target, arguments);
                        self._negociacoesView.update(target);
                    }
                }

                return Reflect.get(target, prop, receiver);
            }
        });

Fiz alguns testes e reparei que ao usar uma arrow function, ao chamar o método adiciona do target, ele está passando como argumento ListaNegociacoes ao invés de Negociacao.

Podem me explicar?

Obrigado.

3 respostas
solução!

Porque o this de uma arrow function é léxico e não dinâmico. Precisa ser dinâmico.

Isso eu tinha entendido... Queria saber nessa contexto do código, uma explicação mais aprofundada...

Não posso recusar o pedido de um aluno meu. Vamos lá.

Primeiro, vamos entender o que aquele código que não usa arrow function faz. Ele muda o objeto original, não é o proxy. Isso, em teoria, não deveria ser feito, pois é no proxy que colocamos todo aquele código extra que não pertence ao objeto original que estamos criando o proxy. No entanto, isso foi necessário porque o Proxy não sabe por padrão interceptar chamada de métodos de maneira transparente. Ele é bom para detectar mudanças em propriedades, mas métodos, é preciso usar de boa imaginação para resolver essa situação. Eu falo isso no curso, é só uma revisão.

Então, como estamos modificando o objeto original e não o proxy, o this da função nova que foi criada precisa ser dinâmico, para poder referenciar o this do objeto e não o this do proxy. Então, recapitulando. O this de toda função é dinâmico e você só sabe o valor dele quando seu código esta rodando. É essa característica que permite, por exemplo, executarmos uma mesma função para eventos do DOM diferentes como click e mouseover, porque o this da função será o elemento do DOM que está disparando o evento. Se usarmos arrow function, ele nunca mudará...então nossa função não pode ser usada em mais de um lugar porque estará amarrada sempre com o this.

Mas Flávio, o que isso tem a ver com a explicação? Só para lembrar. Então, quando no proxy você retorna uma arrow function, o this não será dinâmico e será ListaNegociacoes, porque como arrow function possuem this estático, você identifica this lendo seu código e não em tempo de execução, isso dá maior previsibilidade. É porque que ao alterar o código do objeto original através do proxy passando uma arrow function, ela não considerará como this o objeto original, verdadeiro, mas o contexto no qual foi definido olhando seu código, no caso, será ListaNegociacoes.

Sendo assim, meu aluno, segue a regra de dedo de arrow function: só use em lugares que faça sentido um this estático (é a mesma coisa de que dizer this léxico). Todo lugar que você precisa que o this varie, use uma função padrão.

Consegui esclarecer ou compliquei um pouco mais?

Para fixar, sugiro fazer novamente esses dois exercícios do módulo 1 e do módulo 2. Vale a pena!

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-1/task/16536 https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17455