Šta je kontekst u funkciji?

Контекст (this) у функцији у JavaScript-у дефинише се према начину на који је функција позвана, а не где је она декларативно постављена. Он указује на објекат којем функција припада или који је позива.

Начини одређивања контекста:

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

   // У прегледачу
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Контекст објекта (метод): Ако се функција позове као метод објекта (obj.method()), this унутар функције ће се односити на тај објекат.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Здраво, ја сам ${this.name}`);
     }
   };
   
   user.greet(); // Здраво, ја сам Alice
   

3. Конструкторски контекст: При позиву функције са кључном речи new (new MyClass()), ствара се нови објекат, и this унутар конструктора се односи на тај нови објекат.

   function Person(name) {
     this.name = name;
   }
   
   const person1 = new Person('Bob');
   console.log(person1.name); // Bob
   

4. Јасно одређивање контекста: Методи call, apply и bind омогућавају експлицитно постављање вредности this приликом позивања функције.

   • call(thisArg, arg1, arg2, ...): Позива функцију са датим this и аргументима, појединачно.
   • apply(thisArg, [argsArray]): Позива функцију са датим this и аргументима у виду низа.
   • bind(thisArg, arg1, arg2, ...): Враћа нову функцију у којој је this фиксиран на дату вредност.

   function displayInfo(age) {
     console.log(`${this.name} има ${age} година.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie има 30 година.
   displayInfo.apply(person, [35]); // Charlie има 35 година.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie има 40 година.
   

5. Стрељане функције: Стрељане функције немају сопствени this. Наслеђују this из лексичког окружења (области видљивости у којој су дефинисане).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Здраво из стрелке, ${this.name}`);
       };
       innerArrow(); // `this` овде је anotherUser, наследи се од sayHello
     },
     sayHelloBad: () => { // лоша пракса за методе објекта
         console.log(`Здраво из стрелке, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Здраво из стрелке, David
   
   // У прегледачу, ван strict режима
   anotherUser.sayHelloBad(); // Здраво из стрелке, undefined (this је window)
   

Разумевање контекста је кључно за исправан рад са објектима, методама и догађајним обработачима у JavaScript-у.