Forståelse af JavaScript "dette" søgeord

Hvad gør det her søgeord i JavaScript betyder? Og hvordan kan du bruge det praktisk i dit JavaScript-program? Dette er nogle af de almindelige spørgsmål, som nybegyndere og endda nogle erfarne JavaScript-udviklere stiller om det her søgeord.

Hvis du er en af ​​de udviklere, der spekulerer på, hvad det her nøgleord handler om, så er denne artikel noget for dig. Udforsk hvad det her refererer til i forskellige sammenhænge og gør dig bekendt med nogle gotchas for at undgå forvirring, og selvfølgelig fejl i din kode.

"dette" Inde i det globale omfang

I den globale sammenhæng, det her vil returnere vindue objekt, så længe det er uden for en funktion. Global kontekst betyder, at du ikke placerer det inde i en funktion.

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

Hvis du kører ovenstående kode, får du vinduesobjektet.

"dette" indvendige funktioner (metoder)

Når det bruges inde i funktioner, det her refererer til det objekt, som funktionen er bundet til. Undtagelsen er, når du bruger det her i en selvstændig funktion, i hvilket tilfælde den returnerer vindue objekt. Lad os se nogle eksempler.

I det følgende eksempel sig Navn funktionen er inde i mig objekt (dvs. det er en metode). I tilfælde som dette, det her refererer til det objekt, der indeholder funktionen.

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

det her er mig objekt, så man siger dette.navn inde i sig Navn metoden er nøjagtig den samme som mig.navn.

En anden måde at tænke på er, at det, der er i venstre side af funktionen, når det aktiveres, vil være det det her. Det betyder, at du kan genbruge sig Navn funktion i forskellige objekter og det her vil referere til en helt anden kontekst hver gang.

Nu, som tidligere nævnt, det her returnerer vindue objekt, når det bruges i en selvstændig funktion. Dette skyldes, at en selvstændig funktion er bundet til vindue objekt som standard:

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

Ringer tale() er det samme som at ringe window.talk(), og alt hvad der er i venstre side af funktionen bliver automatisk til det her.

På en sidebemærkning, den det her søgeord i funktionen opfører sig anderledes i JavaScripts strenge tilstand (det vender tilbage udefineret). Dette er også noget, du skal huske på, når du bruger UI-biblioteker, der bruger streng tilstand (f.eks. React).

Brug af "dette" med Function.bind()

Der kan være scenarier, hvor du ikke bare kan tilføje funktionen til et objekt som en metode (som i sidste afsnit).

Måske er objektet ikke dit, og du trækker det fra et bibliotek. Objektet er uforanderligt, så du kan ikke bare ændre det. I tilfælde som dette kan du stadig udføre funktionssætningen separat fra objektet ved hjælp af Function.bind() metode.

I det følgende eksempel sig Navn funktion er ikke en metode på mig objekt, men du har stadig bundet det ved hjælp af binde() fungere:

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

Uanset hvilken genstand du går ind i binde() vil blive brugt som værdien af det her i det funktionskald.

Sammenfattende kan du bruge binde() på enhver funktion og videregive i en ny kontekst (et objekt). Og det objekt vil overskrive betydningen af det her inde i den funktion.

Brug af "dette" med Function.call()

Hvad hvis du ikke vil returnere en helt ny funktion, men hellere bare kalder funktionen efter at have bundet den til dens kontekst? Løsningen på det er opkald() metode:

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

Det opkald() metoden udfører straks funktionen i stedet for at returnere en anden funktion.

Hvis funktionen kræver en parameter, kan du videregive den via opkald() metode. I det følgende eksempel videregiver du sproget til sigNavn() funktion, så du kan bruge den til betinget at returnere forskellige meddelelser:

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

Som du kan se, kan du bare sende en hvilken som helst parameter, du ønsker, til funktionen som det andet argument til opkald() metode. Du kan også sende så mange parametre som du vil.

Det ansøge() metode ligner meget opkald() og binde(). Den eneste forskel er, at du sender flere argumenter ved at adskille dem med et komma med opkald(), mens du sender flere argumenter inde i et array med ansøge().

Sammenfattende, bind(), kald() og anvende() alle giver dig mulighed for at kalde funktioner med et helt andet objekt uden at have nogen form for relation mellem de to (dvs. funktionen er ikke en metode på objektet).

"denne" Inside Constructor-funktioner

Hvis du kalder en funktion med en ny søgeord, skaber det en det her objekt og returnerer det:

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

I ovenstående kode oprettede du tre forskellige objekter fra den samme funktion. Det ny nøgleordet opretter automatisk en binding mellem objektet, der oprettes, og det her nøgleord inde i funktionen.

"dette" Inside Callback-funktioner

Tilbagekaldsfunktioner er anderledes end almindelige funktioner. Tilbagekaldsfunktioner er funktioner, som du overfører til en anden funktion som et argument, så de kan udføres umiddelbart efter, at den primære er færdig med at udføre.

Det det her nøgleord refererer til en helt anden kontekst, når det bruges i tilbagekaldsfunktioner:

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

Efter et sekunds opkald til person konstruktørfunktion og skabe en ny mig objekt, vil det logge vinduesobjektet som værdien af det her. Så når det bruges i en tilbagekaldsfunktion, det her refererer til vinduesobjektet og ikke det "konstruerede" objekt.

Der er to måder at løse dette på. Den første metode er at bruge binde() at binde person funktion til det nykonstruerede objekt:

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

Med ovenstående modifikation, det her i tilbagekaldet vil pege på det samme det her som konstruktørfunktionen (den mig objekt).

Den anden måde at løse problemet med det her i tilbagekaldsfunktioner er ved at bruge pilefunktioner.

"dette" Inside Arrow Functions

Pilefunktioner er forskellige fra almindelige funktioner. Du kan gøre din tilbagekaldsfunktion til en pilefunktion. Med pilefunktioner behøver du ikke længere binde() fordi den automatisk binder sig til det nykonstruerede objekt:

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

Lær mere om JavaScript

Du har lært alt om søgeordet "dette" og hvad det betyder i alle de forskellige sammenhænge i JavaScript. Hvis du er ny med JavaScript, vil du have stor gavn af at lære alt det grundlæggende om JavaScript, og hvordan det virker.