Sobes.tech
Middle

Beszélj a JavaScript függvények kontextusáról.

sobes.tech MI

Válasz az MI-től

A JavaScript-ben a függvény végrehajtási kontextusa (this) meghatározza, hogy a függvény hogyan hívódik meg, és milyen értékek érhetők el benne. A kontextus dinamikusan változik a hívás módjától függően:

  • Globális kontextus: Függvényeken kívül, a this a globális objektumra utal (window böngészőben, global Node.js-ben).
    // Böngészőben
    console.log(this === window); // true
    
    // Node.js-ben
    console.log(this === global); // true
    
  • Függvény kontextus:
    • Szokásos hívás: Nem szigorú módban a this a globális objektumra mutat, ha a függvény nem metódus. Szigorú módban ("use strict";) a this undefined lesz.
      function showThis() {
        console.log(this);
      }
      
      showThis(); // Nem szigorú módban: Globális objektum; Szigorú módban: undefined
      
    • Metódus hívás:
      • A this a metódus tulajdonában lévő objektumra mutat.
      const user = {
        name: 'Alice',
        greet: function() {
          console.log("Hello, my name is " + this.name);
        }
      };
      
      user.greet(); // Hello, my name is Alice
      
    • new-es hívás (konstruktor):
      • Új objektumot hoz létre, amely a this értéke lesz a konstruktor függvényen belül, és ezt az objektumot adja vissza.
      function Person(name) {
        this.name = name;
      }
      
      const person1 = new Person('Bob');
      console.log(person1.name); // Bob
      
    • Kifejezett kontextus megadása (call, apply, bind):
      • call(thisArg, arg1, arg2, ...): Meghívja a függvényt a megadott this-el és külön felsorolt argumentumokkal.
      • apply(thisArg, [argsArray]): Meghívja a függvényt a megadott this-el és argumentumokat tartalmazó tömbbel.
      • bind(thisArg, arg1, arg2, ...): Új függvényt ad vissza, amelyhez a this örökre kötött a megadott thisArg-hoz és az argumentumokhoz.
      function introduce(greeting, punctuation) {
        console.log(greeting + ", I am " + this.name + punctuation);
      }
      
      const person = { name: 'Charlie' };
      
      introduce.call(person, "Hi", "!");  // Hi, I am Charlie!
      introduce.apply(person, ["Hello", "."]); // Hello, I am Charlie.
      
      const boundIntroduce = introduce.bind(person, "Hey");
      boundIntroduce("?"); // Hey, I am Charlie?
      
  • Arrow functions: Nem rendelkeznek saját this-el. A környező lexikális scope-ból öröklik a this-t (ahol definiálták őket).
    const obj = {
      name: 'David',
      sayLater: function() {
        // itt a `this` az `obj`
        setTimeout(() => {
          // itt a `this` szintén az `obj`-re mutat (öröklődik a `sayLater`-ből)
          console.log("Later, I am " + this.name);
        }, 1000);
      }
    };
    
    obj.sayLater(); // Later, I am David