Mi a kontextus egy függvényben?

A JavaScript függvényben a (this) kontextus attól függ, hogyan hívták meg a függvényt, nem attól, hol lett deklarálva. Ez a hívó objektumra vagy arra az objektumra utal, amelyhez a függvény tartozik vagy amit meghív.

A kontextus meghatározásának módjai:

1. Globális kontextus: Függvényen kívül, vagy ha a függvényt nem egyértelmű objektummal hívják meg (this a böngészőben a globális window objektum, Node.js-ben a global, vagy strict módban undefined).

   // Böngészőben
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Objektum kontextus (metódus): Ha a függvényt egy objektum metódusaként hívják (obj.method()), akkor a this a függvényen belül erre az objektumra mutat.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Szia, a nevem ${this.name}`);
     }
   };
   
   user.greet(); // Szia, a nevem Alice
   

3. Konstruktor kontextus: Ha a függvényt a new kulcsszóval hívják (new MyClass()), akkor egy új objektum jön létre, és a this ebben a konstruktorban erre az új objektumra mutat.

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

4. Kézi kontextus megadása: A call, apply és bind módszerek lehetővé teszik a this értékének explicit beállítását a függvényhívás során.

   • call(thisArg, arg1, arg2, ...): A függvényt a megadott this értékkel és argumentumokkal hívja meg, külön-külön.
   • apply(thisArg, [argsArray]): A függvényt a megadott this értékkel és egy argumentumokat tartalmazó tömbbel hívja meg.
   • bind(thisArg, arg1, arg2, ...): Egy új függvényt ad vissza, amelynek a this értéke rögzítve van a megadott értékre.

   function displayInfo(age) {
     console.log(`${this.name} ${age} éves.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie 30 éves.
   displayInfo.apply(person, [35]); // Charlie 35 éves.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie 40 éves.
   

5. Nyíl függvények: A nyíl függvények saját this-el nem rendelkeznek. A this értékét a lexikális környezetből öröklik (ahol definiálták őket).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Szia, a nyíl függvényből, ${this.name}`);
       };
       innerArrow(); // a `this` itt anotherUser, öröklődik a sayHello-ból
     },
     sayHelloBad: () => { // rossz gyakorlat az objektum metódusainál
         console.log(`Szia, a nyíl függvényből, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Szia, a nyíl függvényből, David
   
   // Böngészőben, strict módban kívül
   anotherUser.sayHelloBad(); // Szia, a nyíl függvényből, undefined (a `this` a window)
   

A kontextus megértése kritikus a JavaScript objektumok, metódusok és eseménykezelők helyes működéséhez.