JavaScript - parola chiave this

Ciao a tutti, futuri sviluppatori di JavaScript! Oggi ci imbarcheremo in un viaggio emozionante nel mondo della parola chiave this. Come il tuo amico insegnante di scienze informatiche del quartiere, sono qui per guidarti attraverso questo concetto a volte complicato, ma sempre affascinante. Allora, prendi la tua bevanda preferita, mettiti comodo e tuffiamoci dentro!

Cos'è la parola chiave 'this'?

Immagina di essere a una festa e qualcuno urla, "Ehi, tu!" Chi si girerebbe? Tutti, giusto? Ma se avessero detto, "Ehi, Sarah!" solo Sarah avrebbe risposto. In JavaScript, la parola chiave this è come dire "Ehi, tu!" a un oggetto. È un modo per fare riferimento all'oggetto corrente nel contesto.

La parola chiave this è un identificatore speciale che è automaticamente definito nella portata di ogni funzione. Ma c'è un colpo di scena - il suo valore è determinato da come una funzione viene chiamata. Questa natura dinamica di this è ciò che lo rende sia potente che a volte confusionario.

A quale oggetto si riferisce 'this'?

Ora, questa è la parte interessante. L'oggetto a cui this si riferisce può cambiare a seconda di come e dove viene utilizzato. È come un camaleonte, che cambia i suoi colori in base al suo ambiente. Esaminiamo alcuni scenari:

Sintassi

Prima di addentrarci di più, vediamo rapidamente come utilizziamo this:

console.log(this);

Semplice, vero? Ma non farti ingannare dalla sua semplicità. La magia (o il disordine) avviene quando lo utilizziamo in contesti diversi.

JavaScript 'this' nella Portata Globale

Quando utilizzato nella portata globale (fuori da qualsiasi funzione), this si riferisce all'oggetto globale. In un browser, è solitamente l'oggetto window.

console.log(this === window); // true

this.myGlobalVar = "Sono globale!";
console.log(window.myGlobalVar); // "Sono globale!"

Qui, this è come il pass VIP che ti dà accesso a tutta la festa (portata globale).

JavaScript 'this' in una Funzione

Quando this viene utilizzato all'interno di una funzione regolare, il suo valore dipende da come la funzione viene chiamata.

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

showThis(); // window (in modalità non rigorosa)

In questo caso, this è come un cucciolo smarrito, che si attacca a qualsiasi cosa gli sia intorno - che in modalità non rigorosa è l'oggetto globale.

'this' in una Funzione in Modalità Rigorosa

La modalità rigorosa è come l'insegnante rigoroso che non ti lascia scappare nulla. In modalità rigorosa, this all'interno di una funzione è undefined a meno che non venga impostato esplicitamente.

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

'this' in una Funzione Costruttrice

Quando una funzione viene utilizzata come costruttore (con la parola chiave new), this si riferisce all'oggetto appena creato.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Ciao, sono " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Ciao, sono John"

Qui, this è come un certificato di nascita, che stabilisce l'identità dell'oggetto appena nato.

'this' in una Funzione Arrow

Le funzioni arrow sono i ribelli del mondo JavaScript. Non legano il loro propio this, ma lo ereditano dallo scope circostante.

const obj = {
name: "Alice",
sayHello: () => {
console.log("Ciao, " + this.name);
}
};

obj.sayHello(); // "Ciao, undefined"

In questo caso, this nella funzione arrow non si riferisce a obj, ma allo scope circostante (probabilmente la portata globale).

'this' in un Metodo di Oggetto

Quando this viene utilizzato in un metodo (una funzione che è una proprietà di un oggetto), si riferisce all'oggetto sul quale il metodo è stato chiamato.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

Qui, this è come un fedele maggiordomo, che sempre si riferisce al suo padrone (l'oggetto).

'this' in una Funzione Figlia di un Metodo di Oggetto

Qui è dove le cose possono diventare complicate. In una funzione all'interno di un metodo, this non si riferisce più all'oggetto.

const restaurant = {
name: "Delizie Gourmet",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

In questo caso, this in displayName() si riferisce all'oggetto globale, non a restaurant.

JavaScript 'this' negli Gestori di Eventi

Nei gestori di eventi, this tipicamente si riferisce all'elemento che ha ricevuto l'evento.

<button id="myButton">Clicca qui!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Clicca qui!</button>
});
</script>

Qui, this è come un riflettore, che si concentra sulla star dello spettacolo - l'elemento che è stato cliccato.

Bind della Funzione Esplicita in JavaScript

A volte, vogliamo essere i boss e dire esattamente cosa dovrebbe essere this. Possiamo farlo utilizzando call(), apply() o bind().

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Ciao, " + this.name);
}

sayHello.call(person1); // "Ciao, Alice"
sayHello.apply(person2); // "Ciao, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Ciao, Alice"

Questi metodi sono come un regista, che dice a this esattamente quale ruolo deve interpretare.

Precedenza di 'this' in JavaScript

Ora, riassumiamo la precedenza del binding di this:

Regola	Precedenza
Parola chiave new	1 (Massima)
Bind esplicito (call, apply, bind)	2
Chiamata di metodo	3
Chiamata di funzione	4 (Minima)

Ricorda, le funzioni arrow sono speciali e sempre ereditano this dal loro scope circostante.

Ecco tutto, gente! Abbiamo intrapreso un viaggio attraverso il mondo di this, esplorandone le molte facce e curiosità. Ricorda, comprendere this è come imparare a guidare una bicicletta - potrebbe essere instabile all'inizio, ma con la pratica, diventerai un esperto in breve tempo. Continua a programmare, continua a esplorare e, soprattutto, divertiti con JavaScript!

Credits: Image by storyset