this у JavaScript

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

1. Що таке `this`

this - це посилання на контекст виконання функції, тобто - на об'єкт, у контексті якого функцію було викликано.

Простіше кажучи:

this не визначається під час оголошення функції;
воно призначається в момент виклику функції (runtime);
і залежить від способу виклику, а не від того, де функція написана.

2. Глобальний контекст

У глобальній області (поза функцією):

javascript

console.log(this);

У браузері → window
У Node.js → {} (порожній об'єкт у модулі)

3. Всередині звичайної функції

javascript

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

showThis(); // ?

Без "власника" (obj.method()):

У нестрогому режимі → this = window
У строгому ('use strict') → this = undefined

4. У методі об'єкта

javascript

const user = {
  name: 'Tim',
  sayHi() {
    console.log(`Привіт, я ${this.name}`);
  }
};

user.sayHi(); // Привіт, я Tim

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

5. Втрата `this`

javascript

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

const fn = user.sayHi;
fn(); // undefined, тому що контекст втрачено

Коли ми зберігаємо посилання на метод у змінній - this більше не пов'язаний з user.

6. Як зберегти `this`

Спосіб 1 - `bind`

javascript

const boundFn = user.sayHi.bind(user);
boundFn(); // Привіт, я Tim

Спосіб 2 - стрілкова функція

Стрілкові функції не мають власного this - вони успадковують this із зовнішньої області:

javascript

const user = {
  name: 'Tim',
  sayHiLater() {
    setTimeout(() => {
      console.log(this.name); // 'Tim'
    }, 1000);
  }
};

user.sayHiLater();

7. У конструкторах (`new`)

Якщо функцію викликано з new, this вказує на новий створюваний об'єкт:

javascript

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

const tim = new User('Tim');
console.log(tim.name); // Tim

Під час виклику через new:

створюється порожній об'єкт {};
він зв'язується з this;
функція виконується;
повертається цей об'єкт.

8. В обробниках подій (браузер)

javascript

button.addEventListener('click', function() {
  console.log(this); // елемент button
});

this всередині обробника вказує на DOM-елемент, на якому висить подія.

Якщо використати стрілкову функцію:

javascript

button.addEventListener('click', () => {
  console.log(this); // не button, а зовнішній контекст
});

9. Явне керування `this` (`call`, `apply`, `bind`)

Метод	Що робить	Коли викликається
`call(thisArg, a, b)`	викликає функцію з указаним `this`	одразу
`apply(thisArg, [a, b])`	те саме, але аргументи масивом	одразу
`bind(thisArg)`	повертає нову функцію з "прив'язаним" `this`	пізніше

javascript

function greet() {
  console.log(`Привіт, ${this.name}`);
}

const user = { name: 'Tim' };

greet.call(user);  // Привіт, Tim
greet.apply(user); // Привіт, Tim
greet.bind(user)(); // Привіт, Tim

10. У стрілкових функціях

Стрілкові функції не мають власного this. Воно успадковується із зовнішнього лексичного оточення.

javascript

const user = {
  name: 'Tim',
  showThis: () => console.log(this)
};

user.showThis(); // window (або undefined у strict)

Тут this не user, тому що стрілкова функція взяла this із глобального контексту.

11. `this` у класах

javascript

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Привіт, ${this.name}`);
  }
}

const tim = new User('Tim');
tim.sayHi(); // Привіт, Tim

У методах класів this працює аналогічно звичайним методам об'єктів.

ПІДСУМОК

Контекст	Що буде в `this`
Глобальний (у браузері)	`window`
У звичайній функції	`undefined` (у strict), `window` (у нестрогому)
У методі об'єкта	Сам об'єкт
У стрілковій функції	`this` зовнішньої області
У конструкторі / класі	Новий екземпляр
В обробнику події	DOM-елемент
Через `call` / `apply` / `bind`	Указаний вручну об'єкт

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

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

Premium

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