Zrozumienie słowa kluczowego "this" w JavaScript

'to' w JavaScript

W JavaScript jest to bardziej skomplikowane, ponieważ gdzie to zależy nie tylko od sposobu zdefiniowania funkcji, ale także od formy jej wywołania.

Zobacz, jak to działa w zależności od miejsca i formy inwokacji.

Kontekst globalny

Używany w kontekście globalnym powiązanym z obiektem globalnym, np. okno w przeglądarce internetowej.

this; // okno

Metoda wewnątrz obiektu

Używany wewnątrz metody obiektu związanej z najbliższym otaczającym obiektem. Obiekt jest nowym kontekstem metody to słowo kluczowe. Należy pamiętać, że nie należy zmieniać function () do składni ES6 fun: () => this.context ponieważ zmieni to kontekst.

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

obj.fun(); // obiekt

W tym przykładzie z zagnieżdżonym obiektem, to nadal odnosi się do najbliższego kontekstu.

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

nestedObj.child.fun(); // child

Funkcja bezkontekstowa

Używany wewnątrz funkcji, która nie ma kontekstu (nie ma obiektu jako rodzica) związanego z kontekstem globalnym, nawet jeśli funkcja jest zdefiniowana wewnątrz obiektu.

Zauważ, że używamy var context zamiast let/const context ponieważ niech i const zmienić zmienną dołączoną do kontekstu. var jest zawsze najbliżej globalnego kontekstu wykonania. niech i const deklarować zmienne tylko w lokalnym zakresie bloku.

var context = "globalny";

const obj = {
  context: "object",
  funA: function() {
    function funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // wywołane bez kontekstu
  }
};

obj.funA(); // global

Wewnątrz funkcji konstruktora

Używany wewnątrz funkcji, która jest konstruktorem nowego obiektu powiązanego z nim.

var context = "globalny";

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

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

Funkcja wewnętrzna zdefiniowana w łańcuchu prototypów

Używany wewnątrz funkcji zdefiniowanej w łańcuchu prototypów do tworzenia obiektu związanego z nią.

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

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

Wewnątrz call() i funkcje apply()

call() i apply() są JavaScript funkcje. Dzięki nim obiekt może korzystać z metod należących do innego obiektu. call() przyjmuje argumenty oddzielnie, gdzie apply() przyjmuje je jako tablicę.

to jest tutaj powiązany z nowym kontekstem zmienionym w call() i apply() metody.

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]

Wewnątrz funkcji bind()

bind() jest również metodą JavaScript. Tworzy ona nową funkcję, która będzie miała to ustawiony na pierwszy parametr przekazany do 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]

Wewnątrz programów obsługi zdarzeń

Używany w dowolnym programie obsługi zdarzeń (np, addeventListener, onclick, attachEvent), jest on powiązany z elementem DOM, do którego zdarzenie zostało dołączone.

document.querySelector(".foo").addEventListener("click", function() {
  this; // odnosi się do elementu div `foo`
});

Funkcja strzałki ES6

Używany wewnątrz funkcji strzałki jest zawsze związany z jej zakresem leksykalnym. W funkcji strzałki nie można ponownie przypisać atrybutu to w jakikolwiek sposób.

const globalArrowFunction = () => this;

globalArrowFunction(); // Okno

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

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

Czytaj więcej:

• Największe wyzwania związane z tworzeniem oprogramowania na zamówienie
• Jakie są różnice między software house'em a agencją IT?