Boa noite a todos,
Gostaria de saber se existe algum momentos que eu não devo usar arrow-function? Quando não é indicado e/ou quando é indicado?
Att. Vinicius
Boa noite a todos,
Gostaria de saber se existe algum momentos que eu não devo usar arrow-function? Quando não é indicado e/ou quando é indicado?
Att. Vinicius
Oi Vinicius, beleza?
Quando você não quer herdar o this
e sim definir um novo valor para o this
então é necessário usar a notação de function
.
Um exemplo bem raso, mas que ajuda na compreensão de sua pergunta, é caso você esteja trabalhando dentro do console do browser onde o this
referência o objeto Window. Se você usar arrow functions corre o risco de sobrescrever alguma propriedade do objeto Window, por que as arrow functions não tem seuthis
próprio. Já usando a notação defunction
poderá trabalhar tranquilamente por que um novo this
será criado no contexto dessa função.
Acabou duplicando a resposta aqui.
A Arrow Function não possui o seu próprio contexto de execução.
Por exemplo:
const button = document.querySelector('#click_here');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
Esse código não funcionaria corretamente pois o this não referencia o document. Nesse contexto o certo seria utilizar function(), Veja o exemplo:
const button = document.querySelector('#click_here');
button.addEventListener('click', function() => {
this.classList.toggle('on');
});
Concluindo: A utilização da Arrow Function, vai depender de como você quer utilizar o this.
Você pode se aprofundar mais, lendo a documentação em: MDN Web Docs