Comprendere la parola chiave JavaScript "questo".

Cosa fa il Questo parola chiave in JavaScript significa? E come puoi usarlo praticamente nel tuo programma JavaScript? Queste sono alcune delle domande più comuni che i principianti e anche alcuni sviluppatori JavaScript esperti pongono in merito Questo parola chiave.

Se sei uno di quegli sviluppatori che si chiedono cosa sia il Questo è tutto, allora questo articolo è per te. Esplora cosa Questo si riferisce in contesti diversi e familiarizza con alcuni trucchi per evitare confusione e, ovviamente, bug nel codice.

"questo" all'interno dell'ambito globale

Nel contesto globale, Questo restituirà il finestra oggetto purché sia ​​esterno a una funzione. Il contesto globale significa che non lo inserisci all'interno di una funzione.

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Se esegui il codice sopra, otterrai l'oggetto window.

"questo" Funzioni interne (metodi)

Se utilizzato all'interno delle funzioni, Questo si riferisce all'oggetto a cui è associata la funzione. L'eccezione è quando usi Questo in una funzione autonoma, nel qual caso restituisce il file finestra oggetto. Vediamo alcuni esempi.

Nell'esempio seguente, il direNome la funzione è all'interno di Me oggetto (cioè è un metodo). In casi come questo, Questo si riferisce all'oggetto contenente la funzione.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

Questo è il Me oggetto, per così dire questo nome dentro il direNome il metodo è esattamente lo stesso di io.nome.

Un altro modo di pensarci è che qualunque cosa si trovi sul lato sinistro della funzione quando invocata lo sarà Questo. Ciò significa che puoi riutilizzare il file direNome funzione in oggetti diversi e Questo si riferirà ogni volta a un contesto completamente diverso.

Ora, come accennato in precedenza, Questo restituisce il finestra oggetto quando utilizzato all'interno di una funzione autonoma. Questo perché una funzione autonoma è associata a finestra oggetto per impostazione predefinita:

functiontalk() {
returnthis
}
talk() // returns the window object

Chiamando parlare() è come chiamare finestra.talk()e tutto ciò che si trova sul lato sinistro della funzione diventerà automaticamente Questo.

Una nota a margine, il Questo La parola chiave nella funzione si comporta diversamente in La modalità rigorosa di JavaScript (ritorna non definito). Questo è anche qualcosa da tenere a mente quando usi le librerie dell'interfaccia utente che utilizzano la modalità rigorosa (ad esempio React).

Usando "questo" con Function.bind()

Potrebbero esserci scenari in cui non puoi semplicemente aggiungere la funzione a un oggetto come metodo (come nell'ultima sezione).

Forse l'oggetto non è tuo e lo stai prelevando da una libreria. L'oggetto è immutabile, quindi non puoi semplicemente cambiarlo. In casi come questo, puoi comunque eseguire l'istruzione della funzione separatamente dall'oggetto utilizzando il comando Funzione.bind() metodo.

Nell'esempio seguente, il direNome la funzione non è un metodo su Me oggetto, ma lo hai comunque vincolato utilizzando il file legamento() funzione:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

Qualunque sia l'oggetto in cui passi legamento() verrà utilizzato come valore di Questo in quella chiamata di funzione.

In sintesi, puoi usare legamento() su qualsiasi funzione e passare in un nuovo contesto (un oggetto). E quell'oggetto sovrascriverà il significato di Questo all'interno di quella funzione.

Usando "questo" con Function.call()

Cosa succede se non vuoi restituire una funzione completamente nuova, ma piuttosto semplicemente chiamare la funzione dopo averla associata al suo contesto? La soluzione a questo è il chiamata() metodo:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

IL chiamata() Il metodo esegue immediatamente la funzione invece di restituire un'altra funzione.

Se la funzione richiede un parametro, puoi passarlo tramite il file chiamata() metodo. Nell'esempio seguente, stai passando la lingua al file direNome() funzione, quindi puoi usarla per restituire messaggi diversi in modo condizionale:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Come puoi vedere, puoi semplicemente passare qualsiasi parametro tu voglia alla funzione come secondo argomento chiamata() metodo. Puoi anche passare tutti i parametri che desideri.

IL fare domanda a() il metodo è molto simile a chiamata() E legamento(). L'unica differenza è che passi più argomenti separandoli con una virgola con chiamata(), mentre passi più argomenti all'interno di un array con fare domanda a().

In sintesi, bind(), call() e apply() tutti ti permettono di chiamare funzioni con un oggetto completamente diverso senza avere alcun tipo di relazione tra i due (cioè la funzione non è un metodo sull'oggetto).

"questo" all'interno delle funzioni di costruzione

Se chiami una funzione con a nuovo parola chiave, crea un file Questo oggetto e lo restituisce:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

Nel codice sopra, hai creato tre oggetti diversi dalla stessa funzione. IL nuovo La parola chiave crea automaticamente un'associazione tra l'oggetto che viene creato e il file Questo parola chiave all'interno della funzione.

"questo" all'interno delle funzioni di richiamata

Le funzioni di richiamata sono diverse dalle normali funzioni. Le funzioni di callback sono funzioni che passi a un'altra funzione come argomento, in modo che possano essere eseguite immediatamente dopo che quella principale ha terminato l'esecuzione.

IL Questo La parola chiave si riferisce a un contesto completamente diverso se utilizzata all'interno delle funzioni di callback:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Dopo un secondo dalla chiamata al persona funzione di costruzione e creandone una nuova Me oggetto, registrerà l'oggetto finestra come valore di Questo. Quindi, quando utilizzato in una funzione di callback, Questo si riferisce all'oggetto finestra e non all'oggetto "costruito".

Esistono due modi per risolvere questo problema. Il primo metodo sta utilizzando legamento() per vincolare il persona funzione all'oggetto appena costruito:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Con la modifica di cui sopra, Questo nella richiamata punterà allo stesso Questo come funzione di costruzione (the Me oggetto).

Il secondo modo per risolvere il problema Questo nelle funzioni di callback è utilizzare le funzioni freccia.

"questo" all'interno delle funzioni della freccia

Le funzioni freccia sono diverse dalle funzioni normali. È possibile rendere la funzione di richiamata una funzione freccia. Con le funzioni freccia non ti servono più legamento() perché si lega automaticamente all'oggetto appena costruito:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Ulteriori informazioni su JavaScript

Hai imparato tutto sulla parola chiave "this" e cosa significa in tutti i diversi contesti in JavaScript. Se sei nuovo a JavaScript, trarrai grandi vantaggi dall'apprendere tutte le nozioni di base di JavaScript e come funziona.