Sobes.tech
Middle

Odakle potiče kontekst funkcije u JavaScript-u?

sobes.tech АИ

Одговор од АИ

Контекст извршавања (this) у JavaScript-у одређује се у тренутку позива функције, а не у тренутку њеног проглашавања. Следећи фактори утичу на његову вредност:

  • Глобални контекст: Изван функција, this се односи на глобални објекат (у прегледачу window, у Node.js global). У строгом режиму ('use strict') this у овом случају биће undefined.

    // У прегледачу
    console.log(this); // window
    
    // У Node.js
    console.log(this); // global
    
  • Позив методе објекта: Ако се функција позива као метода објекта (преко тачке), this се односи на тај објекат.

    const obj = {
      name: 'Obj',
      method: function() {
        console.log(this.name);
      }
    };
    obj.method(); // Obj
    
  • "Обичан" позив функције: При једноставном позиву функције (не као метода), this у нестрогом режиму се односи на глобални објекат. У строгом режиму, this ће бити undefined.

    function greet() {
      console.log(this);
    }
    greet(); // window (у нестрогом режиму) или undefined (у строгом режиму)
    
  • Конструктор (new): Када се функција позива са кључном речи new, она делује као конструктор. this унутар функције се односи на нови, управо креирани објекат.

    function Person(name) {
      this.name = name;
    }
    const person1 = new Person('Alice');
    console.log(person1.name); // Alice
    
  • Методе call, apply, bind: Ове методе јасно омогућавају да се постави вредност this за функцију.

    • call и apply позивају функцију одмах, преносећи this као први аргумент. call прихвата остале аргументе појединачно, а apply као низ.
    • bind враћа нову функцију, у којој је вредност this заувек "везана" за прослеђени први аргумент.
    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
    
  • Стрељане функције: Стрељане функције немају своју сопствену this. "Заграђују" вредност this из лексичког окружења у којем су објављене. Ово их чини корисним за callback-ове унутар метода или при раду са DOM догађајима.

    const objWithArrow = {
      name: 'Arrow Obj',
      method() {
        const arrowFunc = () => {
          console.log(this.name); // `this` се узима из `method` (objWithArrow)
        };
        arrowFunc();
      }
    };
    objWithArrow.method(); // Arrow Obj
    
    // Упоредите са обичном функцијом
    const objWithRegular = {
      name: 'Regular Obj',
      method() {
        const regularFunc = function() {
          console.log(this); // `this` ће бити window или undefined (у зависности од строгог режима) приликом позива у овом контексту
        };
        regularFunc();
      }
    };
    objWithRegular.method(); // window (или undefined)
    

Означавање контекста — једна од кључних особина JavaScript-а, и разумевање ових правила је суштинско за исправан рад са функцијама и објектима.