A `this` végrehajtási kontextus értéke mitől függ…

A this értéke JavaScriptben függ a függvény hívási módjától. Fő forgatókönyvek:

Globális kontextus: Függvényen kívül, szigorú módban ('use strict') this undefined. Szabvány módban pedig a globális objektum (window böngészőben, global` Node.js-ben).

Objektum metódusának hívása: this az objektumra mutat, amelyhez a hívott metódus tartozik.

const obj = {
  prop: 'érték',
  method: function() {
    // this === obj
    console.log(this.prop);
  }
};
obj.method();

Egyszerű függvényhívás: Szigorú módban this undefined. Szabvány módban a globális objektum.

function myFunction() {
  // szigorú módban this === undefined
  // szabvány módban this === window (böngészőben)
  console.log(this);
}
myFunction();

Konstruktor (new): A new operátorral hívott függvényben this az újonnan létrehozott objektumra mutat.

function MyClass(name) {
  this.name = name; // this === új objektum
}
const instance = new MyClass('teszt');
// instance.name === 'teszt'

Kifejezett kötés (call, apply, bind): Ezek a módszerek lehetővé teszik this értékének explicit beállítását.
- call(thisArg, arg1, arg2, ...): meghívja a függvényt, this értékét thisArg-ra állítva, és argumentumokat külön-külön adva át.
- apply(thisArg, [argsArray]): meghívja a függvényt, this értékét thisArg-ra állítva, és argumentumokat tömbként adva át.
- bind(thisArg): egy új függvényt ad vissza, amelyhez rögzített this érték tartozik.
```
const anotherObj = { value: 42 };
function showValue() {
  console.log(this.value);
}
showValue.call(anotherObj); // Kiírja 42
```

Nyílfüggvények (=>): A nyílfüggvények saját this-el nem rendelkeznek. A this értéke öröklődik a lexikális környezetből, ahol definiálták.

const outerObj = {
  name: 'Külső',
  method: function() {
    const arrowFunc = () => {
      // itt a `this` az outerObj `method`-jától öröklődik
      console.log(this.name);
    };
    arrowFunc();
  }
};
outerObj.method(); // Kiírja 'Külső'

const anotherArrowFunc = () => {
    // itt a `this` a globális környezetből öröklődik (vagy undefined szigorú módban)
    console.log(this);
};
anotherArrowFunc();

Eseménykezelők DOM-ban: A legtöbb esetben a this az eseménykezelőben az elemre mutat, ahol az esemény történt.

// Böngészőben példa
const button = document.querySelector('button');
button.addEventListener('click', function() {
  // this === button
  console.log(this.tagName);
});

Ezeknek a mechanizmusoknak a megértése kritikus a this helyes használatához JavaScriptben.

A `this` végrehajtási kontextus értéke mitől függ JavaScriptben?