Kas yra kontekstas JavaScript?

Kontekstas (this) JavaScript yra nuoroda į objektą, kuriame vykdoma esama funkcija. Jo reikšmė nustatoma pagal tai, kaip funkcija buvo iškviesta, o ne pagal tai, kur ji buvo apibrėžta.

Pagrindiniai būdai nustatyti kontekstą:

• Bendrasis kontekstas: Už funkcijų, ne griežtame režime, this nurodo į globalų objektą (window naršyklėje, global Node.js). Griežtame režime this yra undefined.

  // Ne griežtas režimas (naršyklėje)
  console.log(this === window); // true
  
  // Griežtas režimas
  "use strict";
  console.log(this === undefined); // true
  

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

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Išvestis: Hello, John (this nurodo į `user`)
  

• Funkcijos kvietimas (call, apply, bind): call ir apply metodai iškviečia funkciją su aiškiai nurodytu kontekstu. bind sukuria naują funkciją su fiksuotu kontekstu.

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

• Konstruktorius (new): Kai funkcija kviečiama su operatoriumi new, sukuriamas naujas tuščias objektas, ir this funkcijos konstruktoriuje nurodo į tą naują objektą.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Išvestis: John (this `Person` viduje nurodo į `john`)
  

• Rodyklės funkcijos: Rodyklės funkcijos neturi savo konteksto. this viduje paimamas iš išorės (leksiškai) aplinkos, kurioje funkcija buvo sukurta.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // `this` paimamas iš `greet` (nurodo į `user`)
          };
          innerGreet();
      }
  };
  user.greet(); // Išvestis: Hello, Alice
  

Suprasti, kaip nustatomas this, yra labai svarbu teisingai dirbant su objektais, metodais ir įvykio apdorojėjais JavaScript'e.