introduzione

Sei pronto per entrare nel divertente mondo di JavaScript e conoscere il potere segreto della parola chiave "this"? Preparati per un fantastico viaggio attraverso l'interessante regno di "questo", dove scoprirai le cause delle sue azioni e realizzerai tutta la potenza del tuo codice. Con esempi accattivanti e spiegazioni cristalline, questa guida ti condurrà in un viaggio emozionante attraverso i vari attacchi di "questo". Sarai attrezzato per gestire qualsiasi difficoltà di codifica che ti si presenterà al termine di questo viaggio e avrai la sicurezza di te stesso per costruire sistemi robusti e scalabili. Quindi, senza ulteriori indugi, allaccia gli stivali del codice e viaggiamo attraverso i territori inesplorati della parola chiave "this"!

La parola chiave "this" in JavaScript si riferisce all'oggetto di cui la funzione corrente è un metodo. È una variabile con ambito dinamico, il che significa che il suo ambito cambia a seconda del contesto della chiamata della funzione durante il runtime. "questo" è un concetto chiave e spesso frainteso in JavaScript poiché il significato può variare sostanzialmente in base al contesto in cui viene utilizzato.

Associazioni di "questo"

La parola chiave "this" ha quattro associazioni principali in JavaScript: associazione predefinita, associazione implicita, associazione esplicita e nuova associazione. La comprensione di questi collegamenti è essenziale per utilizzare efficacemente la parola chiave "this" in JavaScript poiché ognuno di essi specifica come "this" dovrebbe essere utilizzato in un contesto specifico.

1. Rilegatura predefinita

Quando il termine "this" viene utilizzato al di fuori di una funzione o nell'ambito globale in JavaScript, viene associato per impostazione predefinita. In questo caso, "this" si riferisce all'oggetto globale, che è "window" in un browser o "global" in Node.js.

Ecco un esempio dell'associazione predefinita in azione:

Come visto dalla prima istruzione console.log, la parola chiave "this" nell'esempio sopra si riferisce all'oggetto globale quando viene utilizzato al di fuori di qualsiasi funzione. La seconda frase console.log dimostra che quando viene utilizzata all'interno della funzione logThis, si riferisce anche all'oggetto globale.

È fondamentale ricordare che in modalità rigorosa, l'oggetto globale è indefinito e non il valore di "questo" nell'ambito globale. Puoi abilitare la modalità rigorosa aggiungendo "use strict" all'inizio del codice o all'interno di una funzione come mostrato di seguito.

2. Legame implicito

La parola chiave "this" in questa associazione si riferisce all'oggetto di cui la funzione è una proprietà. "this" specifica l'oggetto quando una funzione viene utilizzata come metodo di un oggetto. L'oggetto di cui la funzione è una proprietà determina il valore di "this".

Prendi ad esempio,

La funzione " greet " è un attributo dell'oggetto " persona " nell'esempio precedente. Possiamo accedere alla proprietà name dell'oggetto “ person ” chiamando person.greet(), che imposta il valore di this all'interno del metodo greet sull'oggetto person. Il legame implicito può essere visto in questa situazione. Il legame implicito è illustrato da questo.

Diamo un'occhiata a un altro esempio:

In questo esempio, l'oggetto " istruttore " ha la funzione " sayName " impostata come proprietà e quando viene chiamato teacher.say() , l'oggetto " istruttore " viene impostato come valore di " this " nella funzione " sayName " . Questo è un altro esempio di associazione implicita.

3. Vincolo esplicito

Indipendentemente dal modo o dal punto in cui una funzione viene chiamata nel codice, è possibile impostare in modo esplicito il valore di " this " per una chiamata utilizzando un metodo di associazione esplicito.

Esistono tre metodi di binding esplicito in JavaScript: " call ", " apply " e " bind ".

Puoi chiamare una funzione usando il metodo " call " e puoi anche impostare il valore di " this " per quella chiamata di funzione. Il valore che si desidera impostare per " this " è il primo argomento del metodo di chiamata e gli altri argomenti vengono inviati alla funzione singolarmente.

Prendi ad esempio:

Il metodo " call " viene utilizzato nell'esempio precedente per richiamare la funzione " sayName " e il valore di " this " viene impostato sull'oggetto istruttore.

Simile a " call " è il metodo " apply " tranne per il fatto che accetta un array di argomenti piuttosto che singoli argomenti.

Diamo un'occhiata a un esempio:

Nell'esempio precedente, è stato utilizzato il metodo " applica " per richiamare la sayNamefunzione e impostare il valore di " questo " sull'oggetto " istruttore ". Gli argomenti della funzione vengono passati come array.

Il metodo " bind " crea una nuova funzione usando il primo argomento passato a "bind" come valore di "this". L'argomento dato a "bind" viene impostato come valore di "this" all'interno della funzione originale quando successivamente viene chiamata la nuova funzione.

Ecco un esempio di seguito:

Nell'esempio precedente, il metodo " bind " è stato utilizzato per creare una nuova funzione " istruttoreSayName " utilizzando " this " impostato sull'oggetto " istruttore ". Quando in seguito è stata chiamata la funzione " teacherSayName ", il valore di " this " all'interno della funzione " sayName " è stato impostato sull'oggetto " teacher ", proprio come se avessimo utilizzato " call " o " apply ".

4. Nuovo legame

Il processo mediante il quale la parola chiave " this " è associata a un oggetto di nuova costruzione quando una funzione viene chiamata con l'operatore " new " viene definito associazione " new ".

Quando una funzione viene chiamata con l'operatore " new ", viene creato un nuovo oggetto e la parola chiave " this " all'interno della funzione viene impostata su questo oggetto appena creato. Inoltre, il prototipo dell'oggetto appena creato è impostato sulla proprietà prototipo della funzione.

Prendi ad esempio:

Nell'esempio precedente, viene creato un nuovo oggetto utilizzando l'operatore " new " per chiamare la funzione " Person ". Le proprietà " name " e " greet " vengono aggiunte all'oggetto e la parola chiave " this" all'interno della funzione " Person " viene impostata sull'oggetto appena generato.

È fondamentale tenere presente che l'oggetto appena creato viene restituito senza la necessità di un'istruzione "return" quando una funzione viene chiamata utilizzando l'operatore "new". Se viene utilizzata un'istruzione "return" e restituisce un oggetto, quell'oggetto verrà restituito invece dell'oggetto appena creato. Se viene utilizzata un'istruzione "return" e restituisce un valore non oggetto, l'oggetto appena creato verrà comunque restituito.

Funzione freccia e "questo"

Le funzioni freccia di JavaScript forniscono una scorciatoia per scrivere funzioni anonime (funzioni senza nome). Il modo in cui associano la parola chiave "this" li distingue dalle espressioni di funzioni convenzionali.

Il valore di "this" nelle espressioni di funzioni convenzionali dipende da come viene richiamata la funzione. Come spiegato in precedenza, può essere impostato esplicitamente utilizzando i comandi "call", "apply" o "bind" o impostato implicitamente a seconda dell'oggetto che contiene la funzione.

Tuttavia, nelle funzioni freccia, il contesto in cui è stata generata la funzione freccia, non il modo in cui viene richiamata, determina il valore di "this". Ciò significa che se una funzione freccia non è all'interno di un'altra funzione, la parola chiave "this" all'interno della funzione freccia farà sempre riferimento al valore "this" della funzione esterna o dell'oggetto globale.

In poche parole, le funzioni freccia non hanno il proprio valore "questo"; invece, ereditano il valore "this" dall'ambito di inclusione.

Per esempio:

Ecco un altro esempio di una funzione freccia che fa riferimento alla parola chiave "this" della funzione esterna:

Nell'esempio precedente, la funzione " greet " in questo esempio è stata definita come una funzione freccia all'interno della funzione " Persona ". Il valore " this " nella funzione freccia corrisponde al valore " this " della funzione "Person", che è stato assegnato all'oggetto appena generato " elie ", quando è stata invocata la funzione " greet ".

Vale la pena ricordare che l'uso di "call", "apply" o "bind" non può alterare l'associazione "this" nelle funzioni freccia. Indipendentemente dal metodo utilizzato per richiamare la funzione, il valore "this" all'interno di una funzione freccia rimane lo stesso. Ciò rende le funzioni freccia particolarmente vantaggiose per i callback e i gestori di eventi, in cui il valore di "this" cambia spesso in modo imprevisto.

Conclusione

In conclusione, imparare la parola chiave "this" di JavaScript è un passaggio cruciale per diventare un vero esperto di JavaScript. Questo concetto essenziale ma spesso sconcertante può creare o distruggere il tuo codice ed è la chiave per utilizzare la piena capacità del linguaggio. Sarai in grado di scrivere codice non solo più efficiente ma anche più elegante e dinamico se hai una conoscenza approfondita dell'associazione predefinita, dell'associazione implicita, dell'associazione esplicita e della nuova associazione, che sono le quattro associazioni di base di "questo" . La capacità di sviluppare codice flessibile, adattivo e scalabile che può crescere ed evolversi man mano che i tuoi progetti e requisiti cambiano ti consentirà di affrontare qualsiasi sfida ti si presenti. Quindi, abbraccia la parola chiave "this", padroneggiala e diventa un vero ninja JavaScript!