Откуда берется контекст функции ?
Спросят с вероятностью 7%

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

1️⃣Глобальный контекст и контекст функций

✅Глобальный контекст:
В глобальной области видимости this ссылается на глобальный объект. В браузере это объект window.

    console.log(this); // В браузере это будет window
  

✅Контекст функции:
При обычном вызове функции this ссылается на глобальный объект (в строгом режиме — undefined).

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

  showThis(); // В браузере это будет window (или undefined в строгом режиме)
  

2️⃣Контекст методов объекта

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

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

obj.showThis(); // { name: 'Alice', showThis: [Function: showThis] }

3️⃣Конструкторы и классы

При вызове функции-конструктора с ключевым словом new, this ссылается на новый созданный объект.

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

const alice = new Person('Alice');
console.log(alice.name); // Alice

4️⃣call, apply и bind

Эти методы позволяют явно устанавливать контекст this при вызове функции.

✅call: вызывает функцию с указанным значением this и аргументами, переданными по отдельности.

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

  const obj = { name: 'Alice' };
  showThis.call(obj); // { name: 'Alice' }
  

✅apply: вызывает функцию с указанным значением this и аргументами, переданными в виде массива.

showThis.apply(obj); // { name: 'Alice' }

✅bind: возвращает новую функцию, которая при вызове будет иметь указанный контекст this.

const boundShowThis = showThis.bind(obj);
  boundShowThis(); // { name: 'Alice' }

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

Не имеют собственного контекста this. Вместо этого они захватывают this из окружающего лексического контекста.

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

obj.showThis(); // { name: 'Alice' }

6️⃣Обработчики событий

В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // <button> элемент
});

Контекст функции (this) определяется способом вызова функции. В глобальной области видимости this ссылается на глобальный объект. В методах объекта this ссылается на сам объект. В функциях-конструкторах this ссылается на новый созданный объект. Методы call, apply и bind позволяют явно задавать значение this. Стрелочные функции захватывают this из окружающего контекста. В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

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

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