Контекст вызова (execution context) — это важное понятие в JavaScript, которое определяет, как функция получает доступ к объекту, внутри которого она была вызвана. Другими словами, это то, на что указывает ключевое слово this во время выполнения функции. Чёткое понимание контекста вызова позволяет эффективно работать с объектами, методами и свойствами.

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

• В браузере это объект window.
• В Node.js это объект global.

Пример:

console.log(this); 
// в браузере: window
// в Node.js: global

У каждой функции в JavaScript есть собственный контекст вызова. Он определяется тем, как именно вызвана функция:

• Если функция вызвана напрямую, без привязки к объекту, то её контекстом становится глобальный объект.

Пример:

function showContext() {
  console.log(this);
}
 
showContext();
// в браузере: window
// в Node.js: global

Однако если функция является методом объекта, её контекстом становится сам этот объект:

const user = {
  name: 'Алексей',
  sayHello: function() {
    console.log(`Привет, ${this.name}!`);
  }
};
 
user.sayHello();
// Вывод: Привет, Алексей!

Иногда нужно вручную установить или изменить контекст функции. Для этого используют встроенные методы:

• call() — вызывает функцию, явно задавая объект для this и передавая аргументы по очереди.
• apply() — аналогичен call(), но аргументы передаются в виде массива.
• bind() — создаёт новую функцию с привязанным контекстом, которую можно вызвать позже.

Примеры:

const animal = {
  name: 'Барсик',
  sayName: function(sound) {
    console.log(`${sound}, меня зовут ${this.name}!`);
  }
};
 
const anotherAnimal = { name: 'Рекс' };
 
animal.sayName.call(anotherAnimal, 'Гав'); // Гав, меня зовут Рекс!
animal.sayName.apply(anotherAnimal, ['Гав']); // Гав, меня зовут Рекс!
 
const sayRex = animal.sayName.bind(anotherAnimal, 'Гав');
sayRex(); // Гав, меня зовут Рекс!

При обработке событий контекстом функции становится элемент, на котором произошло событие.

Пример:

<button id="myButton">Нажми меня</button>

const button = document.getElementById('myButton');
 
button.addEventListener('click', function() {
  console.log(this); // выводит элемент button
  this.textContent = 'Вы нажали кнопку!';
});

Таким образом, правильное понимание контекста вызова и использование методов управления им является ключом к грамотной работе с JavaScript-кодом.