Förstå nyckelordet "this" i JavaScript

'detta' i JavaScript

I JavaScript är det mer komplicerat eftersom där detta hänvisar till beror inte bara på hur funktionen är definierad utan också på hur den anropas.

Ta en titt på hur detta fungerar beroende på invokationsplats och form.

Globalt sammanhang

Används i en global kontext som är bunden till det globala objektet, t.ex. fönster i en webbläsare.

detta; // fönster

Inuti objektmetod

Används inuti en objektmetod som är bunden till det närmast omslutande objektet. Objektet är den nya kontexten för detta nyckelord. Observera att du inte bör ändra funktion () till ES6-syntax fun: () => this.context eftersom det kommer att ändra sammanhanget.

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

obj.fun(); // objekt

I det här exemplet med ett nästlat objekt, detta hänvisar fortfarande till sitt närmaste sammanhang.

const nestedObj = {
  sammanhang: "förälder",
  barn: {
    kontext: "barn",
    fun: funktion() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // barn

Sammanhangslös funktion

Används i en funktion som inte har någon kontext (har inget objekt som överordnat) som är bunden till den globala kontexten, även om funktionen är defindad i objektet.

Observera att vi använder var sammanhang istället för let/const sammanhang eftersom Låt och konst ändra variabelns inneslutna sammanhang. var är alltid närmast den globala exekveringskontexten. Låt och konst deklarera variabler endast i ett lokalt blockomfång.

var context = "global";

const obj = {
  sammanhang: "objekt",
  funA: funktion() {
    funktion funB() {
      const context = "funktion";
      returnerar this.context;
    }
    return funB(); // anropad utan kontext
  }
};

obj.funA(); // global

Inuti konstruktörsfunktionen

Används i en funktion som är konstruktör för det nya objekt som är bundet till den.

var context = "global";

funktion Obj() {
  this.context = "Obj-kontext";
}

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

Inre funktion definierad på prototypkedja

Används i en funktion som definieras i prototypkedjan för att skapa ett objekt som är bundet till den.

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

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

Insidan anrop() och apply()-funktioner

anrop() och tillämpa() är JavaScript funktioner. Med hjälp av dessa kan ett objekt använda metoder som tillhör ett annat objekt. anrop() tar argument separat där tillämpa() tar dem som en matris.

detta är här bundet till nya sammanhanget ändras i anrop() och tillämpa() metoder.

const objA = {
  sammanhang: "objA",
  fun: funktion() {
    console.log(this.context, argument);
  }
};

const objB = {
  kontext: "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]

Inuti bind()-funktionen

binda() är också en JavaScript-metod. Det skapar en ny funktion som kommer att ha detta sätts till den första parametern som skickas till bind()**.**

const objA = {
  sammanhang: "objA",
  fun: funktion() {
    console.log(this.context, argument);
  }
};

const objB = {
  kontext: "objB"
};

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

Inuti händelsehanterare

Används i alla händelsehanterare (t.ex, addeventListener, onclick, attachEvent), är den bunden till det DOM-element som händelsen var kopplad till.

document.querySelector(".foo").addEventListener("click", function() {
  this; // hänvisar till div-elementet `foo
});

ES6 pilfunktion

Om den används i pilfunktionen är den alltid bunden till sitt lexikala omfång. I pilfunktionen kan du inte återtilldela detta på något sätt.

const globalArrowFunction = () => this;

globalArrowFunction(); // Fönster

const obj = {
  kontext: "objekt",
  funA: () => detta,
  funB: funktion() {
    return () => {
      returnerar detta.sammanhang;
    };
  }
};

obj.funA(); // fönster
obj.funB()(); // objekt

Läs mer om detta:

• De största utmaningarna med kundanpassad mjukvaruutveckling
• Vad är skillnaden mellan ett mjukvaruföretag och ett IT-bemanningsföretag?