Mis on kontekst JavaScriptis?

Kontekst (this) JavaScript on viide objekti, mille sees jooksutakse praegune funktsioon. Selle väärtus määratakse selle järgi, kuidas funktsioon kutsutakse, mitte selle järgi, kus ta on defineeritud.

Peamised viisid konteksti määramiseks:

• Globaalne kontekst: Funktsioonide väliselt, mitte ranged režiimis, this viitab globaalsele objektile (window brauseris, global Node.js-is). Range režiimis on this undefined.

  // Mitte ranged režiim (brauseris)
  console.log(this === window); // true
  
  // Range režiim
  "use strict";
  console.log(this === undefined); // true
  

• Objekti meetod: Kui funktsioon kutsutakse välja objekti meetodina (obj.method()), siis this funktsiooni sees viitab sellele objekti (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Väljund: Hello, John (this viitab `user`-le)
  

• Funktsiooni kutsumine (call, apply, bind): Meetodid call ja apply kutsuvad funktsiooni välja selgelt määratud kontekstiga. bind loob uue funktsiooni fikseeritud kontekstiga.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Väljund: Hi, Peter (this = `person`)
  sayName.apply(person, ["Hello"]); // Väljund: Hello, Peter (this = `person`)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Väljund: Hey, Peter (this = `person`)
  

• Konstruktor (new): Kui funktsiooni kutsutakse new operaatoriga, siis luuakse uus tühi objekt ning this viitab sellele uuele objektile.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Väljund: John (this `Person` sees viitab `john`-ile)
  

• Noolefunktsioonid: Noolefunktsioonidel ei ole oma konteksti. this võetakse välisest (leksilisest) vaateväljast, kus funktsioon loodi.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // `this` võetakse `greet`-st (viitab `user`-le)
          };
          innerGreet();
      }
  };
  user.greet(); // Väljund: Hello, Alice
  

Kokkuvõttes, this määratlemine on kriitiline, et õigesti töötada objektide, meetodite ja sündmuste käsitlejatega JavaScriptis.