Контекст функції

JavaScriptJunior~1 хв читання

Що таке контекст функції

Контекст функції - це об'єкт, на який посилається ключове слово this всередині функції під час її виконання.

Контекст визначається в момент виклику функції, а не в момент її оголошення.

Приклад

javascript

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

showThis(); // У звичайному виклику - контекст = глобальний об'єкт

У браузері:

javascript

this === window

У Node.js:

javascript

this === undefined (у строгому режимі)

Контекст залежить від способу виклику

Як викликаємо функцію	Чим буде `this`
Звичайний виклик `func()`	Глобальний об'єкт (`window` або `undefined` у strict mode)
Виклик як метод `obj.method()`	Об'єкт `obj`
Через `new`	Новий створений об'єкт
Через `call` / `apply` / `bind`	Вказаний вручну об'єкт
У стрілковій функції	`this` береться із зовнішнього контексту (лексичний)

1. Звичайний виклик (глобальний контекст)

javascript

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

test(); // window (або undefined у strict mode)

2. Метод об'єкта

javascript

const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  },
};

user.sayHi(); // "Alice"

Тут this посилається на об'єкт user, тому що функція викликана як user.sayHi().

3. Втрата контексту

javascript

const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  },
};

const hi = user.sayHi;
hi(); // undefined (this втрачено)

Чому:

Ми передали посилання на функцію, але не сам об'єкт.
При виклику hi() - це звичайний виклик, без контексту user.

Виправлення:

javascript

const hi = user.sayHi.bind(user);
hi(); // "Alice"

4. Контекст при `new`

javascript

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

const u = new User("Alice");
console.log(u.name); // "Alice"

Тут this вказує на новий створений об'єкт (u).

5. call / apply / bind

javascript

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

const user = { name: "Tim" };

greet.call(user);  // "Tim"
greet.apply(user); // "Tim"

const boundGreet = greet.bind(user);
boundGreet();      // "Tim"

Метод	Що робить
`call(thisArg, arg1, arg2, …)`	викликає функцію з вказаним `this` і аргументами
`apply(thisArg, [args])`	те саме, але аргументи в масиві
`bind(thisArg)`	повертає нову функцію із зафіксованим `this`

6. Стрілкові функції - особливий випадок

javascript

const obj = {
  name: "Alice",
  arrow: () => console.log(this.name),
  regular() {
    console.log(this.name);
  },
};

obj.arrow();   // undefined (this - зовнішній контекст, не obj)
obj.regular(); // "Alice"

Важливо:

У стрілкових функцій немає власного this.
Вони "беруть" this із зовнішнього лексичного оточення - там, де були створені.

Коротко запам'ятати

Ситуація	Чим буде `this`
Звичайний виклик	`window` / `undefined`
Метод об'єкта	Сам об'єкт
`new`	Новий екземпляр
`call`, `apply`, `bind`	Вказаний вручну об'єкт
Стрілкова функція	Успадковує `this` ззовні

Проста аналогія

Контекст функції - це "власник виклику". Хто викликає функцію - той і стає this.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.