Ключове слово this у JavaScript
this — це ключове слово в JavaScript, яке вказує на контекст виконання коду. Це посилання на об'єкт, який "володіє" кодом або функцією, що виконується в даний момент. Важливо, що значення this може змінюватися в залежності від того, як була викликана функція.
Як працює this?
Звичайні функції
Коли функція викликається як метод об'єкта, this вказує на об'єкт, для якого був викликаний метод. Тобто, значення this відповідає об'єкту перед крапкою при виклику функції.
const obj = {
name: "hello",
getName: function() {
console.log(this.name);
}
};
obj.getName(); // виведе "hello"Стрілкові функції
У стрілкових функціях this не прив'язується до самої функції, як у звичайних функціях, і вони не мають свого власного this. Натомість, this визначається під час створення стрілкової функції і вказує на батьківський контекст, тобто контекст, в якому була створена стрілкова функція.
const obj = {
name: "hello",
getName: () => {
console.log(this.name); // `this` вказує на глобальний контекст (або window в браузері)
}
};
obj.getName(); // виведе undefined, тому що `this` не прив'язується до objУ випадку класів стрілкові функції поводяться інакше. Вони зберігають значення this з контексту, в якому був створений клас. Це дозволяє використовувати стрілкові функції всередині класів для правильного прив'язування контексту.
Приклад з класом
Всередині класу стрілкова функція автоматично прив'язує this до екземпляра класу, і метод матиме доступ до властивостей цього екземпляра.
class Example {
name = "hello";
getName = () => {
console.log(this.name); // тут `this` вказує на екземпляр класу
};
}
new Example().getName(); // виведе "hello"Контекст виконання
Контекст виконання — це спеціальна внутрішня структура даних, яка містить інформацію про виклик функції і включає:
- Конкретне місце в коді, де знаходиться інтерпретатор.
- Локальні змінні функції.
- Значення
this.
Важливо, що у випадку звичайного об'єкта, якщо метод об'єкта визначено як стрілкова функція, то контекст виклику (значення this) не буде пов'язаний з об'єктом, а буде успадкований з зовнішнього контексту виклику.
const obj = {
name: "hello",
getName: () => {
console.log(this.name); // `this` вказує на глобальний контекст
}
};
obj.getName(); // виведе undefined, тому що `this` не пов'язаний з об'єктомОсобливості стрілкових функцій:
Стрілкові функції не мають свого власного контексту this, і це може призвести до несподіваних результатів, особливо в методах об'єкта.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.