Porozumění klíčovému slovu 'this' v JavaScript

'this' v JavaScript

Na adrese JavaScript je to složitější, protože tam, kde tento závisí nejen na tom, jak je funkce definována, ale také na formě jejího volání.

Podívejte se, jak tento funguje v závislosti na místě a formě vyvolání.

Globální kontext

Používá se v globálním kontextu vázaném na globální objekt, jako např. okno ve webovém prohlížeči.

this; // okno

Uvnitř metody objektu

Používá se uvnitř metody objektu vázané na nejbližší obklopující objekt. Tento objekt je novým kontextem tento klíčové slovo. Všimněte si, že byste neměli měnit funkce () na syntaxi ES6 fun: () => this.context protože změní kontext.

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

obj.fun(); // objekt

V tomto příkladu s vnořeným objektem, tento stále odkazuje na nejbližší kontext.

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

nestedObj.child.fun(); // child

Funkce bez kontextu

Používá se uvnitř funkce, která nemá žádný kontext (nemá žádný objekt jako rodiče) vázaný na globální kontext, i když je funkce definována uvnitř objektu.

Všimněte si, že používáme var context místo let/const context protože nechat a const změnit kontext připojené proměnné. var je vždy nejblíže globálnímu kontextu provádění. nechat a const deklarovat proměnné pouze v lokálním oboru bloku.

var context = "global";

const obj = {
  context: "object",
  funA: function() {
    function funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // vyvoláno bez kontextu
  }
};

obj.funA(); // globální

Uvnitř funkce konstruktoru

Používá se uvnitř funkce, která je konstruktorem nového objektu, který se na ni váže.

var context = "global";

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

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

Uvnitř funkce definované v řetězci prototypů

Používá se uvnitř funkce definované na prototyp řetězce k vytvoření objektu, který je na něj navázán.

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

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

Uvnitř call() a funkce apply()

call() a apply() jsou JavaScript funkce. Pomocí nich může objekt používat metody patřící jinému objektu. call() přijímá argumenty samostatně, kde apply() je přebírá jako pole.

tento je zde vázán na nový kontext změněný v call() a 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]

Uvnitř funkce bind()

bind() je také metoda JavaScript. Vytvoří novou funkci, která bude mít tento nastaven na první parametr předaný příkazu bind()**.**

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

const objB = {
  context: "objB"
};

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

Uvnitř obsluhy událostí

Používá se v jakékoli obsluze události (například, addeventListener, onclick, attachEvent), je svázána s prvkem DOM, ke kterému byla událost připojena.

document.querySelector(".foo").addEventListener("click", function() {
  this; // odkazuje na prvek div `foo`
});

Funkce ES6 arrow

Při použití uvnitř funkce arrow je vždy vázán na její lexikální obor. Ve funkci arrow nelze znovu přiřadit funkci tento jakýmkoli způsobem.

const globalArrowFunction = () => this;

globalArrowFunction(); // Okno

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

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

Přečtěte si více:

• Největší problémy při vývoji softwaru na zakázku
• Jaké jsou rozdíly mezi softwarovou společností a personální agenturou v oblasti IT?