Qual è la differenza tra una funzione classica e una funzione freccia in JavaScript?

La principale differenza riguarda come lavorano con this.

Una funzione classica ha il suo this proprio, che viene determinato dal contesto in cui viene chiamata (come è stata invocata).

Una funzione arrow non ha il suo this proprio. eredita this lessicalmente dall'ambiente in cui è stata definita.

Altre differenze:

• Oggetto arguments: Le funzioni classiche hanno accesso all'oggetto arguments, le arrow no (ma si possono usare i parametri rest).
• Costruttori: Le funzioni classiche possono essere usate come costruttori con l'operatore new. Le arrow, no.
• Proprietà prototype: Le funzioni classiche hanno la proprietà prototype. Le arrow, no.

Esempio di utilizzo di this:

// Esempio con funzione classica
const obj = {
  name: 'Oggetto',
  greet: function() {
    console.log(this.name); // this si riferisce a obj
  }
};

obj.greet(); // Mostra: Oggetto

const greetFunc = obj.greet;
greetFunc(); // Mostra: undefined (o Window nel browser) - this perde il contesto di obj

// Esempio con funzione arrow
const objArrow = {
  name: 'Oggetto con freccia',
  greet: () => {
    console.log(this.name); // this eredita il contesto esterno (in questo caso global o Window)
  }
};

objArrow.greet(); // Mostra: undefined (o il nome della finestra nel browser, se name è definito globalmente)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Mostra: undefined (o il nome della finestra nel browser) - this non cambia