Qual é a diferença entre uma função clássica e uma função de seta em JavaScript?

A principal diferença reside na forma como eles trabalham com this.

Uma função clássica tem o seu próprio this, que é determinado pelo contexto em que é chamada (como foi invocada).

Uma função de seta não tem o seu próprio this. Ela herda this lexicalmente do ambiente em que foi definida.

Outras diferenças:

• Objeto arguments: Funções clássicas têm acesso ao objeto arguments, as setas não (mas podem usar parâmetros rest).
• Construtores: Funções clássicas podem ser usadas como construtores com o operador new. As setas, não.
• Propriedade prototype: Funções clássicas têm a propriedade prototype. As setas, não.

Exemplo de uso de this:

// Exemplo com função clássica
const obj = {
  name: 'Objeto',
  greet: function() {
    console.log(this.name); // this refere-se a obj
  }
};

obj.greet(); // Vai mostrar: Objeto

const greetFunc = obj.greet;
greetFunc(); // Vai mostrar: undefined (ou Window no navegador) - this perde o contexto de obj

// Exemplo com função de seta
const objArrow = {
  name: 'Objeto com seta',
  greet: () => {
    console.log(this.name); // this herda o contexto externo (neste caso global ou Window)
  }
};

objArrow.greet(); // Vai mostrar: undefined (ou o nome da janela no navegador, se name estiver definido globalmente)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Vai mostrar: undefined (ou o nome da janela no navegador) - this não muda