this in JavaScript: regole di binding ed errori comuni

this si decide al momento della chiamata

Quasi tutta la confusione su this nasce da un presupposto sbagliato: che this dipenda da dove una funzione è definita. Non è così. this dipende da come la funzione viene chiamata.

Guarda la stessa funzione chiamata in due modi:

function whoAmI() {
    return this;
}

const user = { name: "Ada", whoAmI };

console.log(user.whoAmI() === user);   // true
console.log(whoAmI());                  // undefined (in strict mode)

Stessa funzione, this diverso. La prima chiamata ha user a sinistra del punto, quindi this è user. La seconda non ha niente a sinistra, quindi this è undefined. La funzione non è cambiata: è cambiato il punto di chiamata.

Tieni a mente questa idea: per capire cosa vale this, guarda la chiamata, non la definizione.

Le quattro regole di binding

Ci sono quattro modi in cui this viene impostato. Quasi ogni domanda su this che ti capiterà trova risposta capendo quale dei quattro si applica.

1. Chiamata di metodo: obj.fn()

Quando una funzione viene chiamata come proprietà di un oggetto, this è quell'oggetto:

const counter = {
    count: 0,
    increment() {
        this.count += 1;
        return this.count;
    },
};

console.log(counter.increment());   // 1
console.log(counter.increment());   // 2

Quello che sta a sinistra del punto diventa this. Tutto qui.

2. Chiamata semplice: fn()

Se la chiami senza nessun oggetto davanti, this è undefined in strict mode (che moduli e classi attivano automaticamente) oppure l'oggetto globale in sloppy mode:

"use strict";

function show() {
    console.log(this);
}

show();   // undefined

È da qui che vengono gli errori "this is undefined". Staccare un metodo dal suo oggetto trasforma una chiamata di metodo in una chiamata semplice:

"use strict";

const counter = {
    count: 0,
    increment() { this.count += 1; },
};

const fn = counter.increment;
// fn();   // TypeError: Cannot read properties of undefined

Nessun counter. prima della chiamata, nessun binding. La funzione non ricorda l'oggetto da cui proviene.

3. Binding esplicito: .call(), .apply(), .bind()

Puoi forzare this al valore che vuoi:

function greet(greeting) {
    return `${greeting}, ${this.name}`;
}

const ada = { name: "Ada" };

console.log(greet.call(ada, "Hello"));       // Hello, Ada
console.log(greet.apply(ada, ["Hi"]));       // Hi, Ada

const greetAda = greet.bind(ada);
console.log(greetAda("Hey"));                // Hey, Ada

.call e .apply chiamano subito la funzione; differiscono solo nel modo in cui passi gli argomenti. .bind restituisce una nuova funzione con this bloccato in modo permanente: utile per le callback.

4. Chiamata con new: new Fn()

Chiamare una funzione con new crea un oggetto nuovo e lo lega a this:

function User(name) {
    this.name = name;
}

const ada = new User("Ada");
console.log(ada.name);   // Ada

Le classi usano questo meccanismo dietro le quinte. Le incontreremo in un capitolo successivo.

Le arrow function non hanno un proprio this

Le arrow function infrangono di proposito le regole viste sopra. Non fanno alcun binding di this: lo ereditano dallo scope circostante, fissato nel momento in cui la arrow viene definita:

const user = {
    name: "Ada",
    regular: function () { return this; },
    arrow: () => this,
};

console.log(user.regular() === user);   // true
console.log(user.arrow());              // undefined (or window/globalThis)

La arrow al livello più alto di un modulo cattura il this del modulo, che è undefined. Anche se viene chiamata come user.arrow(), la arrow si rifiuta di cambiare binding.

Sembra un bug, ma è proprio lo scopo. Le arrow function danno il meglio dentro i metodi, quando vuoi mantenere il this esterno:

const timer = {
    seconds: 0,
    start() {
        setInterval(() => {
            this.seconds += 1;
            console.log(this.seconds);
        }, 1000);
    },
};

// timer.start();   // logs 1, 2, 3, ...

La arrow dentro setInterval eredita this da start, che è stato chiamato come timer.start(). Quindi this.seconds funziona. Una normale function lì avrebbe avuto un proprio this (quello che passa setInterval) e si sarebbe rotta.

Regola pratica: usa le arrow function per le callback dentro i metodi. Usa le funzioni normali per i metodi stessi.

La classica trappola delle callback

È il modo più comune in cui this va storto. Passi un metodo come callback e perde il suo binding:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();
c.increment();   // 1

// setTimeout(c.increment, 100);   // TypeError: this is undefined

setTimeout chiama la funzione come chiamata semplice, non come c.increment(). Ci sono tre modi per risolvere:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();

// 1. Arrow wrapper - call it as a method inside the arrow
setTimeout(() => c.increment(), 0);

// 2. .bind - lock this to c
setTimeout(c.increment.bind(c), 0);

// 3. Class field with arrow - auto-bound per instance
class Counter2 {
    count = 0;
    increment = () => {
        this.count += 1;
        console.log(this.count);
    };
}
setTimeout(new Counter2().increment, 0);

Funzionano tutti e tre. Avvolgerlo in una arrow di solito è la soluzione più chiara.

this al livello più alto

Il this di livello superiore dipende da dove gira il tuo codice:

• Script nel browser (non modulo): this è window.
• Modulo ES (compresa la maggior parte del codice moderno passato da un bundler): this è undefined.
• Modulo CommonJS di Node.js: this è module.exports.

Per un riferimento affidabile all'oggetto globale in qualsiasi ambiente, usa globalThis:

console.log(typeof globalThis);   // object
globalThis.appVersion = "1.0.0";
console.log(globalThis.appVersion);

In pratica non dovresti fare affidamento sul this di livello superiore. Usa globalThis quando ti serve davvero l'oggetto globale, e negli altri casi passa i valori in modo esplicito.

Un rapido albero decisionale

Quando vedi this e non sei sicuro di cosa varrà, segui questo elenco:

1. La funzione è una arrow function? Allora this è quello dello scope che la contiene. Ignora del tutto il punto di chiamata.
2. È stata chiamata con new? Allora this è il nuovo oggetto.
3. È stata chiamata con .call, .apply o come funzione legata con bind? Allora this è il valore passato.
4. È stata chiamata come obj.method()? Allora this è obj.
5. È stata chiamata come semplice fn()? Allora this è undefined in strict mode.

Questa scala, in quest'ordine, risolve ogni caso.

Prossimo passo: le funzioni di ordine superiore

Ora che this non è più un mistero, sei pronto per lo schema che rende JavaScript così espressivo: passare le funzioni come valori. Nella prossima pagina vedremo le funzioni di ordine superiore, cioè funzioni che ricevono o restituiscono altre funzioni, e come stanno alla base dei metodi degli array, dei gestori di eventi e della maggior parte del codice JavaScript reale.