Introduzione a this

In JavaScript, this è una parola speciale che cambia significato a seconda di come una funzione viene chiamata. Non indica la funzione stessa, ma l'oggetto di riferimento legato all’esecuzione in quel momento. Questo significa che la stessa funzione può avere valori diversi di this se invocata in contesti differenti.

Possiamo quindi dire che this rappresenta “chi” sta invocando la funzione: un oggetto, un elemento HTML, una nuova istanza, oppure può essere undefined.

Regole base:

• Metodo di oggetto: this è l'oggetto prima del punto.
• Funzione semplice: in strict mode è undefined; altrimenti è window (ambiente browser).
• Costruttore con new: this è la nuova istanza creata.
• Binding esplicito: call/apply/bind impostano this manualmente.
• Arrow function: non ha this proprio; eredita quello lessicale esterno.

this in un metodo

Quando una funzione è chiamata come proprietà di un oggetto, this punta a quell’oggetto.

Codice Esempio: this come metodo

CODE: Javascript

1. "use strict";

2. let user = {

3.   nome: "Ada",

4.   saluta: function() {

5.     console.log("Ciao " + this.nome); // this -> user

6.   }

7. };

8. user.saluta(); // stampa: Ciao Ada

this in funzione semplice

In strict mode, chiamando una funzione senza oggetto, this è undefined.

Codice Esempio: funzione semplice e strict mode

CODE: Javascript

1. "use strict";

2. function mostraThis() {

3.   console.log(this); // undefined in strict mode

4. }

5. mostraThis();

this con new (costruttore)

Con new, la funzione costruttrice riceve come this il nuovo oggetto creato.

Codice Esempio: costruttore con new

CODE: Javascript

1. function Persona(nome) {

2.   this.nome = nome; // this -> nuova istanza

3. }

4. let p = new Persona("Luca");

5. console.log(p.nome); // Luca

Binding esplicito con call e apply

call e apply invocano subito la funzione impostando this.
Differiscono nel passaggio degli argomenti: separati con call, in array con apply.

Codice Esempio: call vs apply

CODE: Javascript

1. function info(citta, anno) {

2.   console.log(this.nome + " - " + citta + " - " + anno);

3. }

4. let user = { nome: "Ada" };

6. info.call(user, "Milano", 1981);    // Ada - Milano - 1981

7. info.apply(user, ["Roma", 1980]);   // Ada - Roma - 1980

Binding permanente con bind

bind non invoca la funzione subito. Restituisce una nuova funzione con this fissato e, volendo, argomenti predefiniti.

Codice Esempio: bind e perdita di this

CODE: Javascript

1. let counter = {

2.   val: 0,

3.   inc: function() { this.val++; }

4. };

6. // perdita di this se passo il metodo diretto:

7. let f = counter.inc;

8. // f(); // in strict: this = undefined, errore

10. // soluzione: bind

11. let incSafe = counter.inc.bind(counter);

12. incSafe();

13. console.log(counter.val); // 1

this in un gestore di eventi HTML

Quando una funzione è usata come gestore di eventi in un elemento HTML, this fa riferimento all’elemento stesso che ha ricevuto l’evento.

Codice Esempio: this si riferisce all'elemento

CODE: HTML

1. <button onclick="mostraId()" id="btn1">Clicca</button>

3. <script>

4. function mostraId() {

5.   console.log(this.id);   // "btn1" perché this si riferisce al bottone

6. }

7. </script>

Un approccio alternativo è passare direttamente l’elemento come parametro. In questo caso la funzione userà l’argomento ricevuto invece di this.

Codice Esempio: passaggio esplicito dell'elemento

CODE: HTML

1. <button onclick="mostraElemento(this)" id="btn2">Clicca</button>

3. <script>

4. function mostraElemento(elem) {

5.   console.log(elem.id);   // "btn2" perché l’elemento è stato passato come parametro

6. }

7. </script>

Tabella riassuntiva

Considerazioni

call e apply servono quando si vuole invocare subito la funzione con un this specifico. bind è essenziale per passare metodi come callback senza perdere il contesto. Le arrow function ereditano this e sono utili nei callback annidati.