Forstå JavaScript "dette" nøkkelordet

Hva gjør dette betyr nøkkelord i JavaScript? Og hvordan kan du bruke det praktisk i JavaScript-programmet ditt? Dette er noen av de vanlige spørsmålene nybegynnere og til og med noen erfarne JavaScript-utviklere stiller om dette nøkkelord.

Hvis du er en av de utviklerne som lurer på hva dette nøkkelord handler om, så er denne artikkelen for deg. Utforsk hva dette refererer til i forskjellige sammenhenger og gjør deg kjent med noen gotchas for å unngå forvirring, og selvfølgelig feil i koden din.

"dette" i det globale omfanget

I global sammenheng, dette vil returnere vindu objekt så lenge det er utenfor en funksjon. Global kontekst betyr at du ikke plasserer den inne i en funksjon.

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 kjører koden ovenfor, får du vindusobjektet.

"dette" innvendige funksjoner (metoder)

Når det brukes inne i funksjoner, dette refererer til objektet som funksjonen er bundet til. Unntaket er når du bruker dette i en frittstående funksjon, i så fall returnerer den vindu gjenstand. La oss se noen eksempler.

I det følgende eksempelet siNavn funksjonen er inne i meg objekt (dvs. det er en metode). I tilfeller som dette, dette refererer til objektet som inneholder funksjonen.

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

dette er den meg objekt, så si dette.navnet inne i siNavn metoden er nøyaktig den samme som meg.navn.

En annen måte å tenke på er at det som er på venstre side av funksjonen når den påkalles, vil være det dette. Dette betyr at du kan gjenbruke siNavn funksjon i ulike objekter og dette vil referere til en helt annen kontekst hver gang.

Nå, som tidligere nevnt, dette returnerer vindu objekt når det brukes i en frittstående funksjon. Dette er fordi en frittstående funksjon er bundet til vindu objekt som standard:

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

Ringer snakke() er det samme som å ringe window.talk(), og alt som er på venstre side av funksjonen blir automatisk dette.

På en sidenotat, den dette nøkkelord i funksjonen oppfører seg annerledes i JavaScripts strenge modus (det kommer tilbake udefinert). Dette er også noe å huske på når du bruker UI-biblioteker som bruker streng modus (f.eks. React).

Bruke "this" med Function.bind()

Det kan være scenarier der du ikke bare kan legge til funksjonen til et objekt som en metode (som i den siste delen).

Kanskje objektet ikke er ditt, og du henter det fra et bibliotek. Objektet er uforanderlig, så du kan ikke bare endre det. I tilfeller som dette kan du fortsatt utføre funksjonssetningen separat fra objektet ved å bruke Function.bind() metode.

I det følgende eksempelet siNavn funksjon er ikke en metode på meg objekt, men du har fortsatt bundet det ved å bruke binde() funksjon:

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

Uansett hvilken gjenstand du går inn i binde() vil bli brukt som verdien av dette i det funksjonsanropet.

Oppsummert kan du bruke binde() på hvilken som helst funksjon og pass i en ny kontekst (et objekt). Og det objektet vil overskrive betydningen av dette inne i den funksjonen.

Bruke "dette" med Function.call()

Hva om du ikke vil returnere en helt ny funksjon, men heller bare kalle funksjonen etter å ha bundet den til konteksten? Løsningen for det er anrop() metode:

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

De anrop() metoden utfører funksjonen umiddelbart i stedet for å returnere en annen funksjon.

Hvis funksjonen krever en parameter, kan du sende den via anrop() metode. I det følgende eksempelet sender du språket til siNavn() funksjon, slik at du kan bruke den til å betinget returnere forskjellige meldinger:

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 hvilken som helst parameter du vil til funksjonen som det andre argumentet til anrop() metode. Du kan også sende så mange parametere du vil.

De søke om() metoden er veldig lik anrop() og binde(). Den eneste forskjellen er at du sender flere argumenter ved å skille dem med komma med anrop(), mens du sender flere argumenter inne i en matrise med søke om().

Oppsummert, bind(), ring() og bruk() alle lar deg kalle funksjoner med et helt annet objekt uten å ha noen form for relasjon mellom de to (dvs. funksjonen er ikke en metode på objektet).

"dette" Inside Constructor Functions

Hvis du kaller en funksjon med en ny nøkkelord, skaper det en dette 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 koden ovenfor opprettet du tre forskjellige objekter fra samme funksjon. De ny nøkkelord oppretter automatisk en binding mellom objektet som blir opprettet og dette nøkkelord inne i funksjonen.

"dette" inne i tilbakeringingsfunksjoner

Tilbakeringingsfunksjoner er forskjellig fra vanlige funksjoner. Tilbakeringingsfunksjoner er funksjoner som du sender til en annen funksjon som et argument, slik at de kan utføres umiddelbart etter at hovedfunksjonen er ferdig utført.

De dette nøkkelord refererer til en helt annen kontekst når det brukes i tilbakeringingsfunksjoner:

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

Etter ett sekund med å ringe person konstruktørfunksjon og lage en ny meg objekt, vil det logge vindusobjektet som verdien av dette. Så når den brukes i en tilbakeringingsfunksjon, dette refererer til vindusobjektet og ikke det "konstruerte" objektet.

Det er to måter å fikse dette på. Den første metoden er å bruke binde() å binde person funksjon til det nykonstruerte objektet:

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

Med modifikasjonen ovenfor, dette i tilbakeringingen vil peke på det samme dette som konstruktørfunksjonen (den meg gjenstand).

Den andre måten å løse problemet med dette i tilbakeringingsfunksjoner er ved å bruke pilfunksjoner.

"dette" Inside Arrow Functions

Pilfunksjoner er forskjellige fra vanlige funksjoner. Du kan gjøre tilbakeringingsfunksjonen til en pilfunksjon. Med pilfunksjoner trenger du ikke lenger binde() fordi den automatisk binder seg til det nykonstruerte objektet:

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

Lær mer om JavaScript

Du har lært alt om søkeordet «dette» og hva det betyr i alle de forskjellige sammenhengene i JavaScript. Hvis du er ny på JavaScript, vil du ha stor nytte av å lære alt det grunnleggende om JavaScript og hvordan det fungerer.