Avainsanan 'this' ymmärtäminen JavaScript:ssä

'tämä' JavaScript:ssä

Osoitteessa JavaScript se on monimutkaisempi, koska jos tämä viittaa, riippuu paitsi siitä, miten funktio on määritelty, myös siitä, missä muodossa sitä kutsutaan.

Katso miten tämä toimii riippuen kutsun paikasta ja muodosta.

Maailmanlaajuinen konteksti

Käytetään globaalissa kontekstissa, joka on sidottu globaaliin objektiin, kuten esim. ikkuna verkkoselaimessa.

this; // ikkuna

Sisällä objektimenetelmä

Käytetään objektimenetelmän sisällä, joka on sidottu lähimpään ympäröivään objektiin. Objekti on uusi konteksti tämä avainsana. Huomaa, että sinun ei pitäisi muuttaa funktio () ES6-syntaksiin fun: () => this.context koska se muuttaa asiayhteyttä.

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

obj.fun(); // object

Tässä esimerkissä sisäkkäisen objektin kanssa, tämä viittaa edelleen lähimpään asiayhteyteen.

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

nestedObj.child.fun(); // lapsi

Kontekstiton toiminto

Käytetään funktion sisällä, jolla ei ole kontekstia (jolla ei ole objektia vanhempana), joka on sidottu globaaliin kontekstiin, vaikka funktio olisi määritelty objektin sisällä.

Huomaa, että käytämme var context sen sijaan, että let/const context koska anna ja const muuttaa muuttujan sisältämää kontekstia. var on aina lähimpänä globaalia suorituskontekstia. anna ja const ilmoittaa muuttujia vain paikallisessa lohkon laajuudessa.

var context = "global";

const obj = {
  context: "object",
  funA: function() {
    function funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // kutsutaan ilman kontekstia.
  }
};

obj.funA(); // globaali

Konstruktorifunktion sisällä

Käytetään funktion sisällä, joka on siihen sidotun uuden objektin konstruktori.

var context = "global";

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

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

Prototyyppiketjussa määritellyn funktion sisällä

Käytetään prototyyppiketjussa määritellyn funktion sisällä luodakseen siihen sidotun objektin.

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

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

Sisällä call() ja apply() -funktiot

call() ja apply() ovat JavaScript toiminnot. Niiden avulla objekti voi käyttää toisen objektin metodeja. call() ottaa argumentit erikseen, kun apply() ottaa ne matriisina.

tämä on tässä yhteydessä sidottu uuteen kontekstiin, joka on muutettu call() ja apply() menetelmät.

const objA = {
  context: "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]

Sisällä bind()-funktiossa

bind() on myös JavaScript-menetelmä. Se luo uuden funktion, jolla on tämä asetetaan ensimmäiseksi parametriksi, joka on toimitettu 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]

Tapahtumakäsittelijöiden sisällä

Käytetään missä tahansa tapahtumankäsittelijässä (esim, addeventListener, onclick, attachEvent), se sidotaan DOM-elementtiin, johon tapahtuma oli liitetty.

document.querySelector(".foo").addEventListener("click", function() {
  this; // viittaa div-elementtiin `foo`.
});

ES6 nuolifunktio

Jos sitä käytetään nuolifunktion sisällä, se on aina sidottu sen leksikaaliseen laajuuteen. Nuolifunktiossa et voi määrittää uudelleen funktiota tämä millään tavalla.

const globalArrowFunction = () => this;

globalArrowFunction(); // Ikkuna

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

obj.funA(); // Window
obj.funB()(); // objekti

Lue lisää:

• Räätälöityjen ohjelmistojen kehittämisen suurimmat haasteet
• Mitä eroja on ohjelmistotalon ja IT-henkilöstöpalveluyrityksen välillä?