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
thisa globális objektumra utal (windowböngészőben,globalNode.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
thisa globális objektumra mutat, ha a függvény nem metódus. Szigorú módban ("use strict";) athisundefinedlesz.function showThis() { console.log(this); } showThis(); // Nem szigorú módban: Globális objektum; Szigorú módban: undefined - Metódus hívás:
- A
thisa 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 - A
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- Új objektumot hoz létre, amely a
- Kifejezett kontextus megadása (
call,apply,bind):call(thisArg, arg1, arg2, ...): Meghívja a függvényt a megadottthis-el és külön felsorolt argumentumokkal.apply(thisArg, [argsArray]): Meghívja a függvényt a megadottthis-el és argumentumokat tartalmazó tömbbel.bind(thisArg, arg1, arg2, ...): Új függvényt ad vissza, amelyhez athisörökre kötött a megadottthisArg-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?
- Szokásos hívás: Nem szigorú módban a
- Arrow functions: Nem rendelkeznek saját
this-el. A környező lexikális scope-ból öröklik athis-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