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