Het JavaScript-sleutelwoord 'dit' begrijpen

Wat doet de dit trefwoord in JavaScript betekent? En hoe kunt u het praktisch gebruiken in uw JavaScript-programma? Dit zijn enkele veelgestelde vragen die nieuwelingen en zelfs ervaren JavaScript-ontwikkelaars stellen over de dit trefwoord.

Als jij een van die ontwikkelaars bent die zich afvraagt ​​wat de dit trefwoord helemaal over gaat, dan is dit artikel iets voor jou. Ontdek wat dit verwijst naar in verschillende contexten en maak uzelf vertrouwd met enkele valkuilen om verwarring en natuurlijk bugs in uw code te voorkomen.

"dit" binnen de mondiale reikwijdte

In de mondiale context is dit zal de retourneren raam object zolang het zich buiten een functie bevindt. Globale context betekent dat u deze niet binnen een functie plaatst.

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

Als u de bovenstaande code uitvoert, krijgt u het window-object.

"deze" interne functies (methoden)

Bij gebruik binnen functies, dit verwijst naar het object waaraan de functie is gebonden. De uitzondering is wanneer u gebruikt dit in een zelfstandige functie, in welk geval het de raam voorwerp. Laten we een paar voorbeelden bekijken.

In het volgende voorbeeld is de zegNaam functie bevindt zich in de mij object (dat wil zeggen, het is een methode). In gevallen als deze, dit verwijst naar het object dat de functie bevat.

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

dit is de mij bezwaar maken, zo gezegd deze naam binnen in de zegNaam methode is precies hetzelfde als mijn naam.

Een andere manier om erover na te denken is dat alles wat zich aan de linkerkant van de functie bevindt, dat ook zal zijn wanneer het wordt aangeroepen dit. Dit betekent dat u de zegNaam functioneren in verschillende objecten en dit zal telkens naar een geheel andere context verwijzen.

Nu, zoals eerder vermeld, dit retourneert de raam object bij gebruik binnen een zelfstandige functie. Dit komt omdat een zelfstandige functie gebonden is aan de raam standaard object:

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

Roeping gesprek() is hetzelfde als bellen venster.talk(), en alles wat zich aan de linkerkant van de functie bevindt, wordt automatisch dit.

Even terzijde: de dit trefwoord in de functie gedraagt ​​zich anders in De strikte modus van JavaScript (het komt terug ongedefinieerd). Dit is ook iets om in gedachten te houden als u UI-bibliotheken gebruikt die de strikte modus gebruiken (bijvoorbeeld React).

"This" gebruiken met Function.bind()

Er kunnen scenario's zijn waarin u de functie niet zomaar als methode aan een object kunt toevoegen (zoals in de vorige sectie).

Misschien is het object niet van jou en haal je het uit een bibliotheek. Het object is onveranderlijk, dus je kunt het niet zomaar veranderen. In dergelijke gevallen kunt u de functie-instructie nog steeds afzonderlijk van het object uitvoeren met behulp van de Functie.bind() methode.

In het volgende voorbeeld is de zegNaam functie is geen methode op de mij object, maar je hebt het nog steeds gebonden met behulp van de binden() functie:

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

Welk object je ook tegenkomt binden() zal worden gebruikt als de waarde van dit in die functieaanroep.

Kortom, u kunt gebruiken binden() op een willekeurige functie en doorgeven in een nieuwe context (een object). En dat object zal de betekenis van overschrijven dit binnen die functie.

"This" gebruiken met Function.call()

Wat als u geen geheel nieuwe functie wilt retourneren, maar de functie gewoon wilt aanroepen nadat u deze aan zijn context hebt gekoppeld? De oplossing daarvoor is de telefoongesprek() methode:

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

De telefoongesprek() methode voert de functie onmiddellijk uit in plaats van een andere functie terug te geven.

Als de functie een parameter vereist, kunt u deze doorgeven via de telefoongesprek() methode. In het volgende voorbeeld geeft u de taal door aan de zegNaam() functie, zodat u deze kunt gebruiken om voorwaardelijk verschillende berichten te retourneren:

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

Zoals u kunt zien, kunt u elke gewenste parameter aan de functie doorgeven als tweede argument aan de telefoongesprek() methode. U kunt ook zoveel parameters doorgeven als u wilt.

De toepassen() methode lijkt erg op telefoongesprek() En binden(). Het enige verschil is dat je meerdere argumenten doorgeeft door ze te scheiden met een komma telefoongesprek(), terwijl je meerdere argumenten binnen een array doorgeeft met toepassen().

Samengevat, bind(), bel() en pas toe() ze stellen je allemaal in staat functies met een heel ander object aan te roepen zonder enige relatie tussen de twee (dat wil zeggen dat de functie geen methode voor het object is).

"deze" Inside Constructor-functies

Als je een functie aanroept met a nieuw trefwoord, het creëert een dit object en retourneert het:

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

In de bovenstaande code heb je drie verschillende objecten gemaakt met dezelfde functie. De nieuw trefwoord creëert automatisch een binding tussen het object dat wordt gemaakt en het dit trefwoord binnen de functie.

"dit" Inside Callback-functies

Terugbelfuncties zijn dat wel anders dan reguliere functies. Callback-functies zijn functies die u als argument aan een andere functie doorgeeft, zodat ze onmiddellijk kunnen worden uitgevoerd nadat de hoofdfunctie is uitgevoerd.

De dit trefwoord verwijst naar een geheel andere context wanneer het wordt gebruikt in callback-functies:

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

Na één seconde bellen met de persoon constructorfunctie en het creëren van een nieuwe mij object, zal het het vensterobject registreren als de waarde van dit. Dus bij gebruik in een callback-functie, dit verwijst naar het vensterobject en niet naar het "geconstrueerde" object.

Er zijn twee manieren om dit op te lossen. De eerste methode is gebruiken binden() om de te binden persoon functie voor het nieuw gebouwde object:

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

Met de bovenstaande wijziging dit in de callback zal naar hetzelfde verwijzen dit als de constructorfunctie (de mij voorwerp).

De tweede manier om het probleem op te lossen is dit in callback-functies is door pijlfuncties te gebruiken.

"deze" Inside Arrow-functies

Pijlfuncties verschillen van reguliere functies. U kunt van uw terugbelfunctie een pijlfunctie maken. Met pijlfuncties heb je dat niet meer nodig binden() omdat het automatisch bindt aan het nieuw geconstrueerde object:

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

Meer informatie over JavaScript

Je hebt alles geleerd over het trefwoord 'dit' en wat het betekent in alle verschillende contexten in JavaScript. Als JavaScript nieuw voor je is, zul je veel profijt hebben van het leren van alle basisprincipes van JavaScript en hoe het werkt.