Mi az a kontextus a JavaScriptben?

A this kontextus JavaScript-ben egy hivatkozás arra az objektumra, amelyben a jelenlegi függvény fut. Értéke attól függ, hogyan hívták meg a függvényt, nem attól, hol lett definiálva.

A kontextus meghatározásának fő módszerei:

• Globális kontextus: Függvényeken kívül, nem szigorú módban, a this a globális objektumra (window böngészőben, global Node.js-ben) utal. Szigorú módban a this undefined.

  // Nem szigorú mód (böngészőben)
  console.log(this === window); // true
  
  // Szigorú mód
  "use strict";
  console.log(this === undefined); // true
  

• Objektum metódusa: Ha egy függvényt objektum metódusaként hívnak meg (obj.method()), akkor a this a függvényen belül erre az objektumra (obj) mutat.

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Kimenet: Hello, John (this az `user`-re mutat)
  

• Függvényhívás (call, apply, bind): A call és apply módszerek a függvényt egy explicit módon megadott kontextussal hívják meg. A bind egy új függvényt hoz létre fix kontextussal.

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

• Konstruktor (new): Amikor egy függvényt a new operátorral hívunk meg, akkor egy új, üres objektum jön létre, és a this ebben a konstruktorfüggvényben erre az új objektumra mutat.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Kimenet: John (a `this` a Person belsejében erre az `john`-ra mutat)
  

• Nyíl függvények: A nyíl függvényeknek nincs saját kontextusuk. A this értéke a külső (lexikális) környezetből származik, ahol a függvény létrejött.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // a `this` a `greet`-ből származik (az `user`-re mutat)
          };
          innerGreet();
      }
  };
  user.greet(); // Kimenet: Hello, Alice
  

A this meghatározásának megértése kulcsfontosságú a JavaScript-ben az objektumok, metódusok és eseménykezelők helyes kezeléséhez.