Võtmesõna 'this' mõistmine JavaScript-s.

'see' aastal JavaScript

Veebilehel JavaScript see on keerulisem, sest kui see viitab, ei sõltu mitte ainult sellest, kuidas funktsioon on defineeritud, vaid ka sellest, millises vormis seda kutsutakse.

Vaadake, kuidas see töötab sõltuvalt kutsumise kohast ja vormist.

Ülemaailmne kontekst

Kasutatakse globaalses kontekstis, mis on seotud globaalse objektiga, näiteks aken veebibrauseris.

this; // aken

Objekti meetodi sees

Kasutatakse objektimeetodi sees, mis on seotud lähima ümbritseva objektiga. Objekt on uue konteksti see märksõna. Pange tähele, et te ei tohiks muuta funktsioon () ES6 süntaksile fun: () => this.context sest see muudab konteksti.

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

obj.fun(); // object

Selles näites koos sisustatud objektiga, see viitab endiselt oma lähimale kontekstile.

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

nestedObj.child.fun(); // child

Kontekstivaba funktsioon

Kasutatakse funktsiooni sees, millel ei ole konteksti (millel ei ole vanemobjekt), mis on seotud globaalse kontekstiga, isegi kui funktsioon on defineeritud objekti sees.

Pange tähele, et me kasutame var kontekst selle asemel, et let/const kontekst sest lase ja const muuta muutuja lisatud konteksti. var on alati kõige lähemal globaalsele täitmiskontekstile. lase ja const deklareerida muutujaid ainult kohalikus plokis.

var context = "global";

const obj = {
  context: "object",
  funA: function() {
    function funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // kutsutakse üles ilma kontekstita
  }
};

obj.funA(); // globaalne

Konstruktori funktsiooni sees

Kasutatakse funktsiooni sees, mis on sellega seotud uue objekti konstruktor.

var context = "global";

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

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

Prototüüpide ahelas määratletud funktsioonis

Kasutatakse prototüübi ahelas määratletud funktsiooni sees, et luua sellega seotud objekt.

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

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

Sisemine call() ja apply() funktsioonid

call() ja apply() on JavaScript funktsioonid. Nende abil saab objekt kasutada teisele objektile kuuluvaid meetodeid. call() võtab argumendid eraldi, kus apply() võtab neid massiivi kujul.

see on siinkohal seotud uue kontekstiga, mis on muudetud call() ja apply() meetodid.

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]

Funktsiooni bind() sees

bind() on samuti JavaScript meetod. See loob uue funktsiooni, millel on see mis on määratud esimesele parameetrile, mis antakse üle bind()**.**

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

Sündmuste käsitsejate sees

Kasutatakse mis tahes sündmuse käitlejas (näiteks, addeventListener, onclick, attachEvent), on see seotud DOM-elemendiga, millele sündmus kinnitati.

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

ES6 noole funktsioon

Kui seda kasutatakse noolefunktsiooni sees, on see alati seotud selle leksikaalse ulatusega. Noolefunktsioonis ei saa ümber määrata see kuidagi.

const globalArrowFunction = () => this;

globalArrowFunction(); // Window

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

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

Loe edasi:

• Suurimad väljakutsed kohandatud tarkvara arendamisel
• Millised on erinevused tarkvaramaja ja IT-personaliagentuuri vahel?