Kas yra kontekstas funkcijoje?

JavaScript funkcijoje (this) kontekstas nustatomas pagal tai, kaip funkcija buvo iškviesta, o ne pagal tai, kur ji buvo deklaruota. Jis nurodo į objektą, kuriam funkcija priklauso arba kuris ją iškviečia.

Konteksto nustatymo būdai:

1. Pasaulinis kontekstas: Funkcijos išorėje arba jei funkcija iškviečiama be aiškaus objekto (this bus globalus objektas window naršyklėje, global Node.js, arba undefined strict režimu).

   // Naršyklėje
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Objekto kontekstas (metodas): Jei funkcija iškviečiama kaip objekto metodas (obj.method()), this funkcijos viduje nurodo į tą objektą.

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

3. Konstruktoriaus kontekstas: Kai funkcija iškviečiama su žodžiu new (new MyClass()), sukuriamas naujas objektas, ir this konstruktoriuje nurodo į tą naują objektą.

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

4. Aiškus konteksto nurodymas: Metodai call, apply ir bind leidžia aiškiai nustatyti this reikšmę funkcijos iškvietimo metu.

   • call(thisArg, arg1, arg2, ...): Iškviečia funkciją su nurodytu this ir argumentais, perduodamais atskirai.
   • apply(thisArg, [argsArray]): Iškviečia funkciją su nurodytu this ir argumentais, perduodamais kaip masyvas.
   • bind(thisArg, arg1, arg2, ...): Grąžina naują funkciją, kurioje this yra fiksuotas į nurodytą reikšmę.

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

5. Raketinės funkcijos: Raketinės funkcijos neturi savo this. Jos paveldės this iš leksikalinės aplinkos (konteksto, kur jos buvo apibrėžtos).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Sveiki iš rodyklės, ${this.name}`);
       };
       innerArrow(); // `this` čia yra anotherUser, paveldėtas iš sayHello
     },
     sayHelloBad: () => { // bloga praktika objektų metodams
         console.log(`Sveiki iš rodyklės, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Sveiki iš rodyklės, David
   
   // Naršyklėje, išskyrus strict režimą
   anotherUser.sayHelloBad(); // Sveiki iš rodyklės, undefined (this - window)
   

Konteksto supratimas yra labai svarbus teisingai dirbant su objektais, metodais ir įvykių apdorojėjais JavaScript'e.