Co je klíčové slovo 'this'?

this je klíčové slovo v JavaScriptu, které odkazuje na objekt, ve kterém je aktuální kód vykonáván. Jeho hodnota je určena způsobem volání funkce.

Hlavní způsoby určení this:

• Globální kontext: Mimo funkci, this odkazuje na globální objekt (window v prohlížeči, global v Node.js).
• Obvyklé volání funkce: V ne-striktním režimu (strict mode) this také odkazuje na globální objekt (nebo undefined, pokud je funkce volána jako metoda objektu, ale tento objekt je null nebo undefined). V režimu přísném je this rovno undefined.
• Metoda objektu: Pokud je funkce volána jako metoda objektu (tj. přes operátor tečky .), this odkazuje na objekt, který metodu vlastní.
• Konstruktor: Při použití operátoru new this odkazuje na nový vytvářený instance objektu.
• Metody call(), apply(), bind(): Tyto metody umožňují explicitně nastavit hodnotu this při volání funkce. bind() vrací novou funkci s navázaným this, zatímco call() a apply() volají funkci s určeným this.
• Šipkové funkce: Šipkové funkce nemají vlastní this. this v šipkové funkci je lexikálně děděno z okolního prostředí, ve kterém byla definována.

Příklady:

// Globální kontext
console.log(this === window); // true (v prohlížeči)

// Obvyklé volání funkce
function myFunction() {
  console.log(this);
}
myFunction(); // window (v ne-striktním režimu)

// Metoda objektu
const myObject = {
  myMethod: function() {
    console.log(this);
  }
};
myObject.myMethod(); // myObject

// Konstruktor
function MyConstructor() {
  this.value = 10;
  console.log(this);
}
const instance = new MyConstructor(); // instance objekt

// call(), apply(), bind()
function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name);
}
const person = { name: "Alice" };
greet.call(person, "Bob"); // Hello, Bob! My name is Alice
greet.apply(person, ["Bob"]); // Hello, Bob! My name is Alice
const boundGreet = greet.bind(person);
boundGreet("Bob"); // Hello, Bob! My name is Alice

// Šipková funkce
const arrowFunction = () => {
  console.log(this);
};
arrowFunction(); // window (pokud je definována v globálním kontextu)

Pochopení toho, jak je this určováno v různých kontextech, je klíčové pro psaní správného JavaScriptového kódu.