Sobes.tech
Middle

Iš kurio šaltinio kyla funkcijos kontekstas JavaScript?

sobes.tech AI

Atsakymas iš AI

Vykdymo kontekstas (this) JavaScript nustatomas funkcijos kvietimo metu, o ne jos deklaravimo metu. Šie veiksniai įtakoja jo reikšmę:

  • Pasaulinis kontekstas: Funkcijų išorėje this nurodo į pasaulinį objektą (window naršyklėje, global Node.js). Griežtame režime ('use strict') this šiuo atveju bus undefined.

    // Naršyklėje
    console.log(this); // window
    
    // Node.js
    console.log(this); // global
    
  • Objekto metodo kvietimas: Jei funkcija kviečiama kaip objekto metodas (per tašką), this nurodo į tą objektą.

    const obj = {
      name: 'Obj',
      method: function() {
        console.log(this.name);
      }
    };
    obj.method(); // Obj
    
  • "Įprastas" funkcijos kvietimas: Paprasto funkcijos kvietimo metu (ne kaip metodo), this negriežtame režime nurodo į pasaulinį objektą. Griežtame režime this bus undefined.

    function greet() {
      console.log(this);
    }
    greet(); // window (negriežtame režime) arba undefined (griežtame režime)
    
  • Konstruktorius (new): Kai funkcija kviečiama su žodžiu new, ji veikia kaip konstruktorius. this funkcijos viduje nurodo į naują, ką tik sukurtą objektą.

    function Person(name) {
      this.name = name;
    }
    const person1 = new Person('Alice');
    console.log(person1.name); // Alice
    
  • call, apply, bind metodai: Šie metodai aiškiai leidžia nustatyti this reikšmę funkcijai.

    • call ir apply iš karto kviečia funkciją, perduodant this kaip pirmą argumentą. call priima kitus argumentus atskirai, apply – kaip masyvą.
    • bind grąžina naują funkciją, kurios this reikšmė amžinai "pririšta" prie perduoto pirmojo argumento.
    const anotherObj = { name: 'Another Obj' };
    
    function displayContext() {
      console.log(this.name);
    }
    
    displayContext.call(anotherObj); // Another Obj
    displayContext.apply(anotherObj); // Another Obj
    
    const boundFunction = displayContext.bind(anotherObj);
    boundFunction(); // Another Obj
    
  • Strėlinės funkcijos: Strėlinės funkcijos neturi savo this. Jos "užfiksuoja" this reikšmę iš leksikinės aplinkos, kurioje buvo deklaruotos. Tai naudinga kaip atgalinis kvietimas metodų viduje arba dirbant su DOM įvykiais.

    const objWithArrow = {
      name: 'Arrow Obj',
      method() {
        const arrowFunc = () => {
          console.log(this.name); // `this` paimamas iš `method` (objWithArrow)
        };
        arrowFunc();
      }
    };
    objWithArrow.method(); // Arrow Obj
    
    // Palyginkite su įprasta funkcija
    const objWithRegular = {
      name: 'Regular Obj',
      method() {
        const regularFunc = function() {
          console.log(this); // `this` bus window arba undefined (priklausomai nuo režimo) kviečiant tokį kontekstą
        };
        regularFunc();
      }
    };
    objWithRegular.method(); // window (arba undefined)
    

Konteksto apibrėžimas — viena iš pagrindinių JavaScript savybių, ir šių taisyklių supratimas yra esminis teisingam funkcijų ir objektų darbui.