Forstå nøkkelordet 'this' i JavaScript

"dette i JavaScript

I JavaScript er det mer komplisert fordi hvor dette refererer til, avhenger ikke bare av hvordan funksjonen er definert, men også av hvordan den kalles.

Ta en titt på hvordan dette fungerer avhengig av påkallingssted og -form.

Global kontekst

Brukes i en global kontekst bundet til det globale objektet, som vindu i en nettleser.

dette; // vindu

Inne i objektmetoden

Brukes inne i en objektmetode som er bundet til det nærmeste omsluttende objektet. Objektet er den nye konteksten til dette nøkkelord. Merk at du ikke bør endre funksjon () til ES6-syntaks fun: () => this.context fordi det vil endre konteksten.

const obj = {
  kontekst: "objekt",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // objekt

I dette eksempelet med et nestet objekt, dette refererer fortsatt til sin nærmeste kontekst.

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

nestedObj.child.fun(); // child

Kontekstløs funksjon

Brukes i en funksjon som ikke har noen kontekst (ikke har noe objekt som overordnet) bundet til den globale konteksten, selv om funksjonen er definert inne i objektet.

Merk at vi bruker var kontekst i stedet for let/const-kontekst fordi la og konst endre den vedlagte konteksten for variabelen. var er alltid nærmest den globale kjøringskonteksten. la og konst deklarere variabler bare i et lokalt blokkområde.

var context = "global";

const obj = {
  kontekst: "objekt",
  funA: function() {
    funksjon funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // påkalt uten kontekst
  }
};

obj.funA(); // global

Inne i konstruktørfunksjonen

Brukes i en funksjon som er konstruktøren for det nye objektet som er bundet til den.

var context = "global";

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

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

Inne i funksjon definert på prototypkjeden

Brukes i en funksjon som er definert i prototypkjeden for å opprette et objekt som er bundet til den.

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

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

På innsiden call() og apply()-funksjonene

call() og apply() er JavaScript funksjoner. Med disse kan et objekt bruke metoder som tilhører et annet objekt. call() tar argumenter separat der apply() tar dem som en matrise.

dette er her bundet til ny kontekst endret i call() og apply() metoder.

const objA = {
  kontekst: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

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]

Inne i bind()-funksjonen

bind() er også en JavaScript-metode. Den oppretter en ny funksjon som vil ha dette satt til den første parameteren som sendes til bind()**.**

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

const objB = {
  context: "objB"
};

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

Inne i hendelsesbehandlere

Brukes i enhver hendelsesbehandler (for eksempel, addeventListener, onclick, attachEvent), er den bundet til DOM-elementet som hendelsen var knyttet til.

document.querySelector(".foo").addEventListener("click", function() {
  this; // refererer til div-elementet `foo`
});

ES6-pilfunksjon

Når den brukes inne i pilfunksjonen, er den alltid bundet til det leksikalske omfanget. I pilfunksjonen kan du ikke tilordne dette på noen som helst måte.

const globalArrowFunction = () => this;

globalArrowFunction(); // Vindu

const obj = {
  kontekst: "objekt",
  funA: () => this,
  funB: function() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // vindu
obj.funB()(); // objekt

Les mer om dette:

• De største utfordringene med tilpasset programvareutvikling
• Hva er forskjellen mellom et programvarehus og et IT-bemanningsbyrå?