Odkud pochází kontext funkce v JavaScriptu?

Kontext vykonání (this) v JavaScriptu je určen v okamžiku volání funkce, nikoliv při jejím deklarování. Na jeho hodnotu mají vliv následující faktory:

• Globální kontext: Mimo funkce se this odkazuje na globální objekt (v prohlížeči window, v Node.js global). V režimu přísnosti ('use strict') bude this v tomto případě undefined.

  // V prohlížeči
  console.log(this); // window
  
  // V Node.js
  console.log(this); // global
  

• Volání metody objektu: Pokud je funkce volána jako metoda objektu (přes tečku), this odkazuje na tento objekt.

  const obj = {
    name: 'Obj',
    method: function() {
      console.log(this.name);
    }
  };
  obj.method(); // Obj
  

• "Obecné" volání funkce: Při jednoduchém volání funkce (ne jako metoda) se v ne-strict módu this odkazuje na globální objekt. V režimu přísnosti bude this undefined.

  function greet() {
    console.log(this);
  }
  greet(); // window (v ne-strict módu) nebo undefined (v strict módu)
  

• Konstruktér (new): Když je funkce volána s klíčovým slovem new, funguje jako konstruktor. this uvnitř funkce odkazuje na nový právě vytvořený objekt.

  function Person(name) {
    this.name = name;
  }
  const person1 = new Person('Alice');
  console.log(person1.name); // Alice
  

• Metody call, apply, bind: Tyto metody umožňují explicitně nastavit hodnotu this pro funkci.

  • call a apply volají funkci ihned, přičemž this předávají jako první argument. call přijímá ostatní argumenty jednotlivě, apply jako pole.
  • bind vrací novou funkci, jejíž hodnota this je navždy "vázána" k předanému prvnímu argumentu.

  const anotherObj = { name: 'Another Obj' };
  
  function displayContext() {
    console.log(this.name);
  }
  
  displayContext.call(anotherObj); // Another Obj
  displayContext.apply(anotherObj); // Another Obj
  
  const boundFunction = displayContext.bind(anotherObj);
  boundFunction(); // Another Obj
  

• Šipkové funkce: Šipkové funkce nemají svůj vlastní this. "Zachytávají" hodnotu this z lexikálního prostředí, ve kterém byly deklarovány. To je činí užitečnými pro callbacky uvnitř metod nebo při práci s DOM událostmi.

  const objWithArrow = {
    name: 'Arrow Obj',
    method() {
      const arrowFunc = () => {
        console.log(this.name); // `this` je z `method` (objWithArrow)
      };
      arrowFunc();
    }
  };
  objWithArrow.method(); // Arrow Obj
  
  // Porovnejte s běžnou funkcí
  const objWithRegular = {
    name: 'Regular Obj',
    method() {
      const regularFunc = function() {
        console.log(this); // `this` bude window nebo undefined (podle režimu přísnosti) při volání v tomto kontextu
      };
      regularFunc();
    }
  };
  objWithRegular.method(); // window (nebo undefined)
  

Definice kontextu je jednou z klíčových vlastností JavaScriptu, a pochopení těchto pravidel je zásadní pro správnou práci s funkcemi a objekty.