¿Cuál es la diferencia entre una función clásica y una función de flecha en JavaScript?

La principal diferencia radica en cómo trabajan con this.

Una función clásica tiene su propio this, que se determina por el contexto en el que se llama (cómo fue invocada).

Una función flecha no tiene su propio this. Hereda this léxicamente del entorno en el que fue definida.

Otras diferencias:

• Objeto arguments: Las funciones clásicas tienen acceso al objeto arguments, las flechas no (pero se pueden usar parámetros rest).
• Constructores: Las funciones clásicas pueden usarse como constructores con el operador new. Las flechas, no.
• Propiedad prototype: Las funciones clásicas tienen la propiedad prototype. Las flechas, no.

Ejemplo de uso de this:

// Ejemplo con función clásica
const obj = {
  name: 'Objeto',
  greet: function() {
    console.log(this.name); // this hace referencia a obj
  }
};

obj.greet(); // Imprime: Objeto

const greetFunc = obj.greet;
greetFunc(); // Imprime: undefined (o Window en navegador) - this pierde el contexto de obj

// Ejemplo con función flecha
const objArrow = {
  name: 'Objeto con flecha',
  greet: () => {
    console.log(this.name); // this hereda el contexto externo (en este caso global o Window)
  }
};

objArrow.greet(); // Imprime: undefined (o el nombre de la ventana en navegador, si name está definido globalmente)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Imprime: undefined (o el nombre de la ventana en navegador) - this no cambia