Só complementando:

arrow functions "herdam" o this do contexto mais próximo. Mas nao declaram um contexto próprio.

Ex:

class A {
   methodA() { } 

   methodB() {
      const b = () => this.methodA()
   }
}

functions contém um this próprio, ou seja, um contexto.

Quando uma function é chamada diretamente (foo()) o this dela é undefined.

Se uma function é instanciada (new foo()) o this vai ser a instancia da function (da msm forma que acontece com classes).

Ex:

class A {
   methodA() { } 

   methodB() {
      const b = function() {
        this.methodA(); // vai dar erro pq this é undefined
      } 
      
      const a = new (function ()
   }
}

Function e arrow function são duas coisas diferentes. Muita gente confunde isso, pensando que são apenas formas diferente de declarar uma função

ericnevesrhá 2 anos

Correto, muito boa observação, massa demais seu comentário 🛸

dedrakshá 2 anos

Lembrando que arrow funcions também precisam ser declaradas antes de serem usadas. Eu gosto muito de usar arrow functions pra fazer callbacks junto com o jQuery.

$('#meu-seletor').on('click', () => {
    // Lógica do onlclick
})

Mas como o colega mencionou, se eu precisar do this, tenho que usar uma function normal.

$('#meu-seletor').on('click', function() {
    // Aqui eu tenho o this, referente ao objetor que gerou evento
})