Co je to kontext v JavaScriptu?

Kontext (this) v JavaScriptu je odkaz na objekt, v jehož rámci se aktuální funkce vykonává. Jeho hodnota je určena tím, jak byla funkce volána, nikoliv tím, kde byla definována.

Hlavní způsoby určení kontextu:

• Globální kontext: Mimo funkce, v nerigidním režimu, this odkazuje na globální objekt (window v prohlížeči, global v Node.js). V přísném režimu je this undefined.

  // Nerigidní režim (v prohlížeči)
  console.log(this === window); // true
  
  // Přísný režim
  "use strict";
  console.log(this === undefined); // true
  

• Metoda objektu: Pokud je funkce volána jako metoda objektu (obj.method()), this uvnitř funkce odkazuje na tento objekt (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Výstup: Hello, John (this odkazuje na user)
  

• Volání funkce (call, apply, bind): Metody call a apply volají funkci s explicitně uvedeným kontextem. bind vytváří novou funkci s pevně daným kontextem.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Výstup: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Výstup: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Výstup: Hey, Peter (this = person)
  

• Konstruktér (new): Při volání funkce s operátorem new se vytvoří nový prázdný objekt a this uvnitř konstruktorové funkce odkazuje na tento nový objekt.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Výstup: John (this uvnitř Person odkazuje na john)
  

• Šipkové funkce: Šipkové funkce nemají vlastní kontext. this uvnitř šipkové funkce je převzat z vnějšího (lexikálního) prostředí, ve kterém byla vytvořena.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this je převzaté z greet (odkazuje na user)
          };
          innerGreet();
      }
  };
  user.greet(); // Výstup: Hello, Alice
  

Porozumění tomu, jak je this určeno, je klíčové pro správnou práci s objekty, metodami a obslužnými funkcemi událostí v JavaScriptu.