Расскажи о контексте функций в JavaScript.

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

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

  // В браузере
  console.log(this === window); // true
  
  // В Node.js
  console.log(this === global); // true
  

• Контекст функции:
  • Стандартный вызов: В нестрогом режиме this внутри функции ссылается на глобальный объект (если функция не метод объекта). В строгом режиме ("use strict";) this будет undefined.

    function showThis() {
      console.log(this);
    }
    
    showThis(); // В нестрогом: Global object; В строгом: undefined
    

  • Вызов как метод объекта: this ссылается на объект, частью которого является метод.

    const user = {
      name: 'Alice',
      greet: function() {
        console.log("Hello, my name is " + this.name);
      }
    };
    
    user.greet(); // Hello, my name is Alice
    

  • Вызов с new (конструктор): Создает новый объект, который становится значением this внутри функции-конструктора, и возвращает этот объект.

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

  • Явное указание контекста (call, apply, bind):
    • call(thisArg, arg1, arg2, ...): Вызывает функцию с указанным this и аргументами, перечисленными по отдельности.
    • apply(thisArg, [argsArray]): Вызывает функцию с указанным this и аргументами в виде массива.
    • bind(thisArg, arg1, arg2, ...): Возвращает новую функцию, у которой this навсегда привязан к thisArg и привязанным аргументам.

    function introduce(greeting, punctuation) {
      console.log(greeting + ", I am " + this.name + punctuation);
    }
    
    const person = { name: 'Charlie' };
    
    introduce.call(person, "Hi", "!");  // Hi, I am Charlie!
    introduce.apply(person, ["Hello", "."]); // Hello, I am Charlie.
    
    const boundIntroduce = introduce.bind(person, "Hey");
    boundIntroduce("?"); // Hey, I am Charlie?
    

• Стрелочные функции: Не имеют собственного контекста this. Они захватывают this из объемлющей лексической области видимости (той, в которой они были определены).

  const obj = {
    name: 'David',
    sayLater: function() {
      // this здесь ссылается на obj
      setTimeout(() => {
        // this здесь также ссылается на obj (унаследован из sayLater)
        console.log("Later, I am " + this.name);
      }, 1000);
    }
  };
  
  obj.sayLater(); // Later, I am David