Какво е контекст в функция?

Контекстът (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.