Il tutorial di oggi viene gentilmente offerto dal talentuoso Cody Lindley, dal suo ebook gratuito: JavaScript Enlightenment. Discute il confuso Questo
parola chiave e i vari modi per determinare e impostare il suo valore.
Ogni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nel luglio 2011.
Questo
Quando viene creata una funzione, viene creata una parola chiave chiamata (dietro le quinte), che collega all'oggetto in cui opera la funzione. Detto in altro modo, questo è disponibile per l'ambito della sua funzione, ma è un riferimento all'oggetto di cui quella funzione è una proprietà / metodo.
Diamo un'occhiata a questo oggetto:
 Notare come all'interno del getGender
funzione, stiamo accedendo alla proprietà gender usando la notazione dot (ad es cody.gender
) sull'oggetto cody stesso. Questo può essere riscritto usando Questo
per accedere al cody
oggetto perché Questo
punta al cody
oggetto.
Il Questo
usato in this.gender
si riferisce semplicemente al cody
oggetto su cui si trova la funzione
operativo.
L'argomento di Questo
può essere fonte di confusione, ma non deve essere. Ricordalo solo, in generale, Questo
è usato all'interno delle funzioni per fare riferimento all'oggetto in cui è contenuta la funzione, al contrario della funzione stessa (le eccezioni includono l'uso di nuovo
parola chiave o chiamata()
e applicare()
).
Questo
guarda e agisce come qualsiasi altra variabile, tranne che non puoi modificarlo. argomenti
e tutti i parametri inviati alla funzione, Questo
è una parola chiave (non una proprietà) nell'oggetto di chiamata / attivazione. Questo
Determinato? Il valore di Questo
, passato a tutte le funzioni, si basa sul contesto in cui la funzione viene chiamata in fase di esecuzione. Fai attenzione qui, perché questa è una di quelle stranezze che devi solo memorizzare.
Il myObject
oggetto nel codice sottostante viene data una proprietà chiamata sayFoo
, che punta al sayFoo
funzione. Quando il sayFoo
la funzione è chiamata dall'ambito globale, si riferisce all'oggetto finestra. Quando è chiamato come metodo di myObject
, Questo
si riferisce a myObject
.
Since myObject
ha una proprietà chiamata foo
, quella proprietà è usata.
Chiaramente, il valore di Questo
si basa sul contesto in cui viene chiamata la funzione. Considera che entrambi myObject.sayFoo
e sayFoo
puntare alla stessa funzione. Tuttavia, a seconda di dove (cioè il contesto) sayFoo ()
è chiamato da, il valore di Questo
è diverso.
Se aiuta, ecco lo stesso codice con l'oggetto principale (ad es finestra
) usato esplicitamente.
Accertati che mentre passi le funzioni o abbia più riferimenti a una funzione, ti rendi conto del valore di Questo
cambierà a seconda del contesto in cui si chiama la funzione.
Questo
e gli argomenti seguono lo scope lessicale. Questo
La parola chiave si riferisce all'oggetto principale nelle funzioni annidate Potresti chiederti cosa succede Questo
quando è usato all'interno di una funzione che è contenuta all'interno di un'altra funzione. La cattiva notizia è nell'ECMA 3, Questo
perde la sua strada e si riferisce all'oggetto principale (finestra
oggetto nei browser), invece dell'oggetto all'interno del quale è definita la funzione.

Nel codice qui sotto, Questo
all'interno di funz2
e FUNC3
perde la sua strada e si riferisce a non myObject
ma invece all'oggetto principale.
La buona notizia è che questo verrà corretto in ECMAScript 5. Per ora, devi essere consapevole di questa situazione, specialmente quando inizi a passare le funzioni in giro come valori ad altre funzioni.
Considera il codice qui sotto e cosa succede quando si passa una funzione anonima a foo.func1. Quando la funzione anonima è chiamata all'interno di foo.func1
(una funzione all'interno di una funzione) il Questo
il valore all'interno della funzione anonima sarà un riferimento all'oggetto principale.
Ora non dimenticherai mai: il Questo
il valore sarà sempre un riferimento all'oggetto head quando la sua funzione host è incapsulata all'interno di un'altra funzione o invocata nel contesto di un'altra funzione (di nuovo, questo è corretto in ECMAScript 5).
In modo che la Questo
il valore non si perde, puoi semplicemente usare la catena di visibilità per mantenere un riferimento Questo
nella funzione genitore. Il codice seguente mostra come, usando una variabile chiamata quello
, e sfruttando il suo scopo, possiamo tenere traccia del contesto delle funzioni.

Questo
Il valore di Questo
è normalmente determinato dal contesto in cui viene chiamata una funzione (tranne quando il nuovo
viene utilizzata la parola chiave, di cui più in un minuto), ma è possibile sovrascrivere / controllare il valore di Questo
utilizzando applicare()
o chiamata()
per definire quale oggetto Questo
punta a quando si richiama una funzione. Usare questi metodi è come dire: "Ehi, chiama la funzione X ma dì alla funzione di usare l'oggetto Z come valore per Questo
."In questo modo, il modo predefinito in cui JavaScript determina il valore di Questo
è sovrascritto.
Sotto, creiamo un oggetto e una funzione. Quindi invochiamo la funzione tramite chiamata()
in modo che il valore di Questo
all'interno della funzione utilizza myObject
come contesto. Le dichiarazioni all'interno del myFunction
la funzione verrà quindi compilata myObject
con proprietà invece di popolare l'oggetto principale. Abbiamo modificato l'oggetto a cui Questo
(all'interno di myFunction
) si riferisce.
Nell'esempio sopra, stiamo usando chiamata()
, ma applicare()
potrebbe essere usato anche La differenza tra i due è come vengono passati i parametri per la funzione. utilizzando chiamata()
, i parametri sono solo valori separati da virgola. utilizzando applicare()
, i valori dei parametri sono passati all'interno di un schieramento
. Sotto, è la stessa idea, ma usando applicare()
.
Quello che devi portare via qui è che puoi sovrascrivere il modo predefinito in cui JavaScript determina il valore di
Questo
nello scopo di una funzione.
Questo
Parola chiave all'interno di una funzione del costruttore definita dall'utente Quando una funzione è invocata con il nuovo
parola chiave, il valore di Questo
- come indicato nel costruttore - si riferisce all'istanza stessa. Detto in un altro modo: nella funzione di costruzione, possiamo sfruttare l'oggetto tramite Questo
prima che l'oggetto sia effettivamente creato. In questo caso, il valore predefinito di Questo
cambia in un modo non diverso dall'uso chiamata()
o applicare()
.
Di seguito, impostiamo a Persona
funzione di costruzione che utilizza Questo
per fare riferimento a un oggetto che si sta creando. Quando un'istanza di Persona
è creato, questo nome
farà riferimento all'oggetto appena creato e posizionerà una proprietà chiamata nome
nel nuovo oggetto con un valore dal parametro (nome
) passato alla funzione di costruzione.
Ancora, Questo
si riferisce all '"oggetto che deve essere" quando la funzione di costruzione viene invocata usando il nuovo
parola chiave. Se non avessimo usato il nuovo
parola chiave, il valore di Questo
sarebbe il contesto in cui viene invocata la Persona, in questo caso l'oggetto principale. Esaminiamo questo scenario.
Questo
All'interno di un metodo di prototipo si riferisce a un'istanza di Constructor Se usato in funzioni aggiunte a quelle di un costruttore prototipo
proprietà, Questo
si riferisce all'istanza su cui viene invocato il metodo. Diciamo che abbiamo un'usanza Persona()
funzione di costruzione. Come parametro, richiede il nome completo della persona. Nel caso in cui abbiamo bisogno di accedere al nome completo della persona, aggiungiamo a whatIsMyFullName
metodo per il Person.prototype
, così che tutto Persona
le istanze ereditano il metodo. Quando si usa Questo
, il metodo può riferirsi all'istanza che lo richiama (e quindi alle sue proprietà).
Qui dimostro la creazione di due Persona
oggetti (cody
e lisa
) e l'ereditato whatIsMyFullName
metodo che contiene questa parola chiave per accedere all'istanza.
Il take away qui è che la parola chiave Questo
è usato per riferirsi a istanze quando usate all'interno di un metodo contenuto nel prototipo
oggetto. Se l'istanza non contiene la proprietà, inizia la ricerca del prototipo.
- Se l'istanza o l'oggetto indicato da Questo
non contiene la proprietà a cui si fa riferimento, le stesse regole che si applicano a qualsiasi ricerca di proprietà vengono applicate e la proprietà sarà "cercata" sulla catena del prototipo. Quindi nel nostro esempio, se il nome e cognome
la proprietà non era quindi contenuta nel nostro caso nome e cognome
sarebbe cercato a Person.prototype.fullName
poi Object.prototype.fullName
.
Questo libro non tratta schemi di progettazione JavaScript o implementa un paradigma orientato agli oggetti con codice JavaScript. Non è stato scritto per distinguere le buone caratteristiche del linguaggio JavaScript dal cattivo. Non è pensato per essere una guida di riferimento completa. Non è indirizzato a persone nuove alla programmazione oa quelle completamente nuove in JavaScript. Né questo è un libro di ricette di JavaScript. Quei libri sono stati scritti.