Что такое контекст в 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(); // Output: 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"); // Output: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Output: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Output: Hey, Peter (this = person)
  

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

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Output: John (this внутри Person ссылается на john)
  

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

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this берется из greet (ссылается на user)
          };
          innerGreet();
      }
  };
  user.greet(); // Output: Hello, Alice
  

Понимание того, как определяется this, критически важно для правильной работы с объектами, методами и событийными обработчиками в JavaScript.