Comprendere 'this' in JavaScript: una guida per padroneggiare il suo comportamento nelle funzioni freccia e anonime

La parola chiave "this" in JavaScript può essere fonte di confusione per gli sviluppatori. È essenziale capire a cosa si riferisce "this", perché può variare in base al contesto.

Usiamo alcuni personaggi di Star Wars per spiegare il concetto - so quello che stai pensando: "Ma no, un altro articolo che usa personaggi di Star Wars!".

Sì! 🤓 Sono un fan di Star Wars! 😁

Tuttavia, immagina di avere un Jedi di nome Luke Skywalker e un Signore dei Sith chiamato Darth Vader. Entrambi possono usare la Forza, ma il modo in cui la usano è diverso.

In JavaScript, la parola chiave "this" è come la Forza - ti dà il potere di accedere alle proprietà e ai metodi degli oggetti, ma il modo in cui viene utilizzata può variare.

Esempio:

const luke = {
  name: 'Luke Skywalker',
  useTheForce() {
    console.log(`${this.name} uses the Force!`);
  }
};

const vader = {
  name: 'Darth Vader',
  useTheForce() {
    console.log(`${this.name} uses the Force!`);
  }
};

luke.useTheForce(); // "Luke Skywalker uses the Force!"
vader.useTheForce(); // "Darth Vader uses the Force!"

In questo codice, luke e vader sono oggetti con un metodo useTheForce.
Quando chiamiamo luke.useTheForce(), la parola chiave this all'interno del metodo si riferisce a luke, e quando chiamiamo vader.useTheForce(), this si riferisce a vader.

Fin qui tutto bene. 😑

È importante tenere presente che this può cambiare a seconda del contesto. Ad esempio, se usiamo useTheForce come una funzione regolare invece di un metodo, this si riferirà all'oggetto globale:

const useTheForce = luke.useTheForce;
useTheForce(); // "undefined uses the Force!"

In questo caso, this non si riferisce più a luke o vader, ma all'oggetto globale, quindi this.name sarà indefinito.

Lo stesso accadrà anche quando si utilizza la funzione freccia:

const obj = {
  name: "Luke Skywalker",
  printName: function() {
    console.log(this.name);
  },
  printNameArrow: () => {
    console.log(this.name);
  }
};

obj.printName(); // outputs "Luke Skywalker"
obj.printNameArrow(); // outputs "undefined"

Nell'esempio precedente, la funzione tradizionale printName stampa correttamente la proprietà nome di obj. Tuttavia, la funzione freccia printNameArrow stampa undefined perché si riferisce all'oggetto globale this, che non ha una proprietà nome.

Nelle funzioni tradizionali, this è dinamicamente scritto, il che significa che si riferisce all'oggetto che chiama la funzione. Tuttavia, nelle funzioni freccia, this è scritto in modo lessicale, il che significa che si riferisce all'oggetto nell'ambito circostante.

In generale, la parola chiave this è uno strumento potente in JavaScript, ma è anche uno che richiede un'attenta considerazione.

Con un po' di pratica, sarai in grado di usare la Forza - eh, this - con fiducia!

Buon coding! ✌️