Comprensione completa di questa parola chiave

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.

Tutorial ripubblicato

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.


Panoramica concettuale di 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()).

Note importanti

  • La parola chiave Questo guarda e agisce come qualsiasi altra variabile, tranne che non puoi modificarlo.
  • - Al contrario di argomenti e tutti i parametri inviati alla funzione, Questo è una parola chiave (non una proprietà) nell'oggetto di chiamata / attivazione.

Come è il valore di 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.

Nota importante

  • Tutte le variabili tranne Questo e gli argomenti seguono lo scope lessicale.

Il 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).


Lavorare attorno alla funzione nidificata

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.


Controllo del valore di 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.


Usando il 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.

 

La parola chiave 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.

Gli appunti

- 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.


Leggi il libro gratuitamente!

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.