⚓ Comprendere il concetto di this nelle funzioni JavaScript

In JavaScript, il comportamento del contesto this può generare confusione, soprattutto quando si confrontano arrow function e funzioni standard. In questo articolo esploreremo a fondo il significato di this nelle arrow function, confrontandolo con le function tradizionali, attraverso esempi chiari e spiegazioni mirate.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

❔ Cos'è `this` in JavaScript?

Il valore di this rappresenta il contesto di esecuzione di una funzione, ovvero l'oggetto a cui la funzione è legata al momento della chiamata. Questo valore cambia in base a come viene invocata la funzione, non a dove è definita.

🙂 Funzioni Standard: `this` è dinamico

Nelle funzioni standard, this viene determinato dinamicamente. In una funzione associata a un oggetto, this fa riferimento a quell'oggetto. Tuttavia, se la funzione viene usata come callback o invocata in modo disaccoppiato, il contesto può cambiare, portando a comportamenti inattesi.

const person = {
  name: "Alice",
  greet: function () {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Hello, my name is Alice

const greetFn = person.greet;
greetFn(); // Hello, my name is undefined (in strict mode) or Hello, my name is [object Window]

Nell’esempio, quando greetFn() viene invocata, non ha più il legame con l’oggetto person, quindi this perde il suo riferimento.

➡️ Arrow Function: `this` è lessicale

La principale caratteristica distintiva delle arrow function è che non hanno un proprio this. Invece, ereditano il valore di this dal contesto lessicale (cioè dall'ambiente in cui sono state definite).

const person = {
  name: "Bob",
  greet: () => {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Hello, my name is undefined

In questo esempio, this non fa riferimento a person, ma all’ambiente esterno (in questo caso window o undefined in strict mode), perché la funzione è una arrow function.

Ora vediamo come questo comportamento può essere utile.

👷‍♂️ Caso pratico: callback in metodi

Quando si lavora con metodi come setTimeout o map, le arrow function sono spesso preferite proprio per la gestione del this.

Funzione standard con workaround:

function Timer() {
  this.seconds = 0;
  setInterval(function () {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

new Timer(); // NaN, perché this non è l'istanza di Timer

Soluzione classica: usare `.bind(this)` o salvare il contesto:

function Timer() {
  this.seconds = 0;
  setInterval(function () {
    this.seconds++;
    console.log(this.seconds);
  }.bind(this), 1000);
}

Con arrow function (più pulito):

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

In questo caso, l’arrow function permette di mantenere il riferimento a this dell’istanza Timer senza bisogno di workaround.

🤔 Quando usare (e quando evitare) le arrow function

Usa le arrow function quando:

Hai bisogno di mantenere il contesto this del contenitore (es. classi, oggetti).
Stai scrivendo funzioni inline, brevi e semplici.
Vuoi evitare di legare this manualmente.

Evita le arrow function quando:

Hai bisogno di una funzione con un proprio this.
Stai definendo metodi di oggetti che devono usare this relativo all'oggetto stesso.

Esempio da evitare:

const counter = {
  value: 0,
  increment: () => {
    this.value++;
  }
};

counter.increment(); 
console.log(counter.value); // 0, perché this non è `counter`

🆚 Tabella comparativa: Arrow Function vs Funzioni Standard

Caratteristica	Arrow Function	Funzione Standard
Contesto `this`	Lessicale (eredita dal contesto esterno)	Dinamico (dipende da come viene invocata)
Ha un proprio `this`?	No	Sì
Uso come metodo oggetto	Sconsigliato, `this` non punta all'oggetto	Ideale, `this` punta all'oggetto
Uso in callback (es. `setTimeout`)	Preferibile: mantiene il contesto esterno	Richiede `.bind()` o variabile ausiliaria
Può essere usata come costruttore?	No (`new ArrowFunction` genera errore)	Sì
Oggetto `arguments`	Non disponibile	Disponibile
Sintassi	Compatta, utile per funzioni brevi	Più verbosa ma più flessibile

⚓ Conclusioni

Le arrow function sono potenti e rendono il codice più conciso e leggibile, ma vanno usate con consapevolezza. La loro caratteristica principale — il this lessicale — le rende perfette per molte situazioni, ma inadatte in altre.

Conoscere la differenza tra il comportamento di this nelle funzioni standard e nelle arrow function è fondamentale per scrivere codice JavaScript robusto e privo di bug difficili da diagnosticare.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog