Sobes.tech
Middle

No kurienes nāk funkcijas konteksts JavaScript?

sobes.tech AI

Atbilde no AI

Izpildes konteksts (vai this) JavaScript tiek noteikts izsaukšanas brīdī, nevis tās deklarēšanas brīdī. Tā vērtību ietekmē šādi faktori:

  • Globālais konteksts: Ārpus funkcijām this atsaucas uz globālo objektu (pārlūkprogrammā window, Node.js global). Stingrā režīmā ('use strict') this šajā gadījumā būs undefined.

    // Pārlūkprogrammā
    console.log(this); // window
    
    // Node.js
    console.log(this); // global
    
  • Objekta metodes izsaukums: Ja funkcija tiek izsaukta kā objekta metode (caur punktu), this atsaucas uz šo objektu.

    const obj = {
      name: 'Obj',
      method: function() {
        console.log(this.name);
      }
    };
    obj.method(); // Obj
    
  • "Parasta" funkcijas izsaukums: Vienkāršā funkcijas izsaukuma gadījumā (ne kā metode) this neitrālā režīmā atsaucas uz globālo objektu. Stingrā režīmā this būs undefined.

    function greet() {
      console.log(this);
    }
    greet(); // window (neitrālā režīmā) vai undefined (stingrā režīmā)
    
  • Konstruktors (ar new): Kad funkcija tiek izsaukta ar atslēgvārdu new, tā darbojas kā konstruktors. this funkcijas iekšienē atsaucas uz jauno, tikko izveidoto objekta instanci.

    function Person(name) {
      this.name = name;
    }
    const person1 = new Person('Alice');
    console.log(person1.name); // Alice
    
  • Metodes call, apply, bind: Šīs metodes tieši ļauj iestatīt this vērtību funkcijai.

    • call un apply izsauc funkciju uzreiz, nododot this kā pirmo argumentu. call pieņem pārējos argumentus atsevišķi, bet apply – kā masīvu.
    • bind atgriež jaunu funkciju, kuras this vērtība ir "sasaistīta" ar nodoto pirmo argumentu uz mūžu.
    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
    
  • Līnijas funkcijas: Līnijas funkcijas nav savas this. Tās "noķer" this vērtību no leksiskās vides, kurā tās tika deklarētas. Tas tās padara noderīgas atpakaļsaucēs metodes iekšienē vai darbā ar DOM notikumiem.

    const objWithArrow = {
      name: 'Arrow Obj',
      method() {
        const arrowFunc = () => {
          console.log(this.name); // `this` ņemts no `method` (objWithArrow)
        };
        arrowFunc();
      }
    };
    objWithArrow.method(); // Arrow Obj
    
    // Salīdzinājumam ar parastu funkciju
    const objWithRegular = {
      name: 'Regular Obj',
      method() {
        const regularFunc = function() {
          console.log(this); // `this` būs window vai undefined (atkarībā no stingrā režīma) izsaukuma brīdī
        };
        regularFunc();
      }
    };
    objWithRegular.method(); // window (vai undefined)
    

Konteksta definīcija ir viena no galvenajām JavaScript iezīmēm, un šo noteikumu izpratne ir būtiska, lai pareizi strādātu ar funkcijām un objektiem.