Mis on kontekst funktsioonis?

JavaScript funktsioonis (this) kontekst määratakse selle järgi, kuidas funktsiooni kutsutakse, mitte selle deklaratsiooni kohast. See viitab objekti, millele funktsioon kuulub või mida ta kutsub.

Konteksti määramise viisid:

1. Globaalkontekst: väljaspool funktsioone või kui funktsiooni kutsutakse ilma objekti määramata (this on brauseris globaalne objekt window, Node.js-is global, või undefined strict režiimis).

   // Brauseris
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Objekti kontekst (meetod): Kui funktsioon kutsutakse objekti meetodina (obj.method()), siis this funktsiooni sees viitab sellele objektile.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Tere, minu nimi on ${this.name}`);
     }
   };
   
   user.greet(); // Tere, minu nimi on Alice
   

3. Konstruktorikontekst: Kui funktsioon kutsutakse new-iga (new MyClass()), siis luuakse uus objekt ja this konstruktoris viitab sellele uuele objektile.

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

4. Selge konteksti määramine: Meetodid call, apply ja bind võimaldavad selgelt määrata this väärtuse funktsiooni kutsumise ajal.

   • call(thisArg, arg1, arg2, ...): Kutsub funktsiooni välja määratud this-ga ja argumentidega.
   • apply(thisArg, [argsArray]): Kutsub funktsiooni välja määratud this-ga ja argumentide massiiviga.
   • bind(thisArg, arg1, arg2, ...): Tagastab uue funktsiooni, mille this on fikseeritud määratud väärtusele.

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

5. Noolefunktsioonid: Noolefunktsioonidel ei ole oma this-i. Nad pärivad this-i leksikaalsest keskkonnast (kontekstist, kus need defineeriti).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Tere noole, ${this.name}`);
       };
       innerArrow(); // `this` siin on anotherUser, pärib sayHello-st
     },
     sayHelloBad: () => { // halb praktika objekti meetodite jaoks
         console.log(`Tere noole, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Tere noole, David
   
   // Brauseris, strict režiimist väljaspool
   anotherUser.sayHelloBad(); // Tere noole, undefined (this - window)
   

Konteksti mõistmine on kriitiline objekti, meetodite ja sündmuste töötlejate korrektseks toimimiseks JavaScriptis.