Het sleutelwoord 'this' begrijpen in JavaScript

"dit in JavaScript

In JavaScript het is ingewikkelder omdat waar deze verwijst, hangt niet alleen af van hoe de functie is gedefinieerd, maar ook van de vorm waarin deze wordt aangeroepen.

Kijk eens hoe deze werkt afhankelijk van de plaats en vorm van aanroeping.

Wereldwijde context

Gebruikt in een globale context gebonden aan het globale object, zoals raam in een webbrowser.

dit; // venster

Binnen objectmethode

Wordt gebruikt binnen een objectmethode die gebonden is aan het dichtstbijzijnde omsluitende object. Het object is de nieuwe context van de deze sleutelwoord. Merk op dat u functie () naar ES6 syntaxis leuk: () => this.context omdat het de context zal veranderen.

const obj = {
  context: "object",
  fun: functie() {
    return this.context;
  }
};

obj.fun(); // object

In dit voorbeeld met een genest object, deze verwijst nog steeds naar de dichtstbijzijnde context.

const nestedObj = {
  context: "parent,
  child: {
    context: "child",
    fun: functie() {
      return this.context;
    }
  }
};

genestObj.child.fun(); // kind

Functie zonder context

Gebruikt binnen een functie die geen context heeft (geen object als ouder heeft) gebonden aan de globale context, zelfs als de functie is gedefinieerd binnen het object.

Merk op dat we var context in plaats van let/const context omdat laat en const de context van de variabele wijzigen. var is altijd het dichtst bij de globale uitvoeringscontext. laat en const declareer variabelen alleen in een lokaal blokbereik.

var context = "globaal";

const obj = {
  context: "object",
  funA: functie() {
    functie funB() {
      const context = "functie";
      return this.context;
    }
    return funB(); // aangeroepen zonder context
  }
};

obj.funA(); // globaal

Binnen constructorfunctie

Gebruikt binnen een functie die de constructor is van het nieuwe object dat eraan gebonden is.

var context = "globaal";

functie Obj() {
  this.context = "Obj context";
}

const obj = new Obj();
obj.context; // Obj context

Binnen functie gedefinieerd op prototypeketen

Wordt gebruikt binnen een functie die gedefinieerd is op de prototypeketen om een object te maken dat eraan gebonden is.

const ProtoObj = {
  fun: functie() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

Binnen oproep() en apply() functies

oproep() en toepassen() zijn JavaScript functies. Hiermee kan een object methoden van een ander object gebruiken. oproep() neemt argumenten afzonderlijk waar toepassen() neemt ze als een array.

deze is hier gebonden aan nieuwe context veranderd in oproep() en toepassen() methoden.

const objA = {
  context: "objA",
  fun: functie() {
    console.log(this.context, argumenten);
  }
};

const objB = {
  context: "objB"
};

objA.fun(1, 2); // objA, [1, 2].
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

Binnen bind() functie

binden() is ook een JavaScript methode. Het creëert een nieuwe functie die deze ingesteld op de eerste parameter die wordt doorgegeven aan bind()**.**

const objA = {
  context: "objA",
  fun: functie() {
    console.log(this.context, argumenten);
  }
};

const objB = {
  context: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

Binnen event handlers

Gebruikt in elke event handler (bijvoorbeeld, addeventListener, onclick, attachEvent), is het gebonden aan het DOM-element waaraan de gebeurtenis was gekoppeld.

document.querySelector(".foo").addEventListener("click", function() {
  this; // verwijst naar het `foo` div element
});

ES6 pijl functie

Gebruikt binnen de pijlfunctie is het altijd gebonden aan de lexicale scope. In de pijlfunctie kun je de deze op welke manier dan ook.

const globalArrowFunction = () => this;

globalArrowFunction(); // Venster

const obj = {
  context: "object",
  funA: () => this,
  funB: functie() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // venster
obj.funB()(); // object

Lees meer:

• De grootste uitdagingen bij het ontwikkelen van software op maat
• Wat zijn de verschillen tussen een softwarehuis en een IT-personeelsbureau?