В каком случае функция меняет контекст ?
Спросят с вероятностью 3%

Контекст выполнения функции определяется значением ключевого слова this. Контекст может изменяться в зависимости от способа вызова функции. Рассмотрим основные случаи, когда контекст функции меняется:

1️⃣Вызов функции как метода объекта

Когда функция вызывается как метод объекта, контекст (this) ссылается на этот объект.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // 'Alice'

В этом примере this внутри функции greet ссылается на объект obj.

2️⃣Вызов функции без контекста (как обычная функция)

Когда функция вызывается как обычная функция (не как метод объекта), контекст (this) ссылается на глобальный объект (window в браузере или global в Node.js). В строгом режиме (strict mode) контекст будет undefined.

function globalFunction() {
  console.log(this);
}

globalFunction(); // В нестрогом режиме: window (в браузере), в строгом режиме: undefined

3️⃣Вызов конструктора (с использованием new)

Когда функция вызывается с использованием ключевого слова new, она работает как конструктор, и контекст (this) ссылается на новый объект, созданный этой функцией.

function Person(name) {
  this.name = name;
}

const person = new Person('Bob');
console.log(person.name); // 'Bob'

4️⃣Явное задание контекста с помощью call, apply и bind

Позволяют явно задать контекст (this) для функции.

✅`call`: вызывает функцию с указанным контекстом и аргументами.
✅`apply`: вызывает функцию с указанным контекстом и аргументами в виде массива.
✅`bind`: возвращает новую функцию, которая при вызове имеет указанный контекст.

Пример:

function greet() {
  console.log(this.name);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Dave' };

greet.call(person1); // 'Charlie'
greet.apply(person2); // 'Dave'

const boundGreet = greet.bind(person1);
boundGreet(); // 'Charlie'

5️⃣Стрелочные функции

Не имеют своего собственного контекста (this). Вместо этого они наследуют контекст из внешней функции, в которой были объявлены. Это поведение называется "лексическим this".

const obj = {
  name: 'Eve',
  greet: function() {
    const arrowFunction = () => {
      console.log(this.name);
    };
    arrowFunction();
  }
};

obj.greet(); // 'Eve'

В этом примере this внутри стрелочной функции ссылается на объект obj, потому что стрелочная функция была объявлена внутри метода greet этого объекта.

6️⃣Методы как коллбеки

Когда методы объектов передаются как коллбеки, контекст может измениться. Это часто происходит, если метод используется вне контекста своего объекта.

const obj = {
  name: 'Frank',
  greet: function() {
    console.log(this.name);
  }
};

setTimeout(obj.greet, 1000); // undefined или ошибка, так как this ссылается на глобальный объект или undefined в строгом режиме

Чтобы сохранить контекст, можно использовать bind:

setTimeout(obj.greet.bind(obj), 1000); // 'Frank'

Функция меняет контекст (this) в зависимости от способа ее вызова. Контекст может быть объектом, если функция вызывается как метод; новым объектом, если функция вызывается как конструктор; глобальным объектом или undefined, если функция вызывается как обычная функция; явно заданным при использовании call, apply или bind; или унаследованным из внешней функции в случае стрелочных функций.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых