Какво е контекст в JavaScript?

Контекстът (this) в JavaScript е препратка към обекта, в рамките на който се изпълнява текущата функция. Неговата стойност се определя от начина, по който е била извикана функцията, а не от мястото, където е била дефинирана.

Основните начини за определяне на контекста:

• Глобален контекст: В извънфункционален код, в нестрог режим this се отнася към глобалния обект (window в браузър, global в Node.js). В строг режим this е undefined.

  // Нестрог режим (в браузър)
  console.log(this === window); // true
  
  // Строг режим
  "use strict";
  console.log(this === undefined); // true
  

• Метод на обект: Ако функция се извиква като метод на обект (obj.method()), this вътре във функцията се отнася към този обект (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Изход: Hello, John (this се отнася към user)
  

• Извикване на функция (call, apply, bind): Методи call и apply извикват функция с явно зададен контекст. bind създава нова функция с фиксиран контекст.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Изход: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Изход: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Изход: Hey, Peter (this = person)
  

• Конструктор (new): При извикване на функция с оператор new, се създава нов празен обект, и this вътре във функцията-конструктор се отнася към този нов обект.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Изход: John (this вътре в Person се отнася към john)
  

• Стрелкови функции: При стрелковите функции няма собствен контекст. this вътре в стрелкова функция взема стойността от външната (лексическа) област на видимост, където е създадена функцията.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this взема стойността от greet (се отнася към user)
          };
          innerGreet();
      }
  };
  user.greet(); // Изход: Hello, Alice
  

Разбирането на начина, по който се определя this, е критично за правилната работа с обекти, методи и събитийни обработчици в JavaScript.