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

Основне поняття this

`This` у JavaScript посилається на об’єкт, який викликає функцію. Іншими словами, `this` вказує на контекст, у якому виконується функція. Це означає, що значення `this` залежить від того, як функція була викликана. Наприклад, якщо функція викликається як метод об’єкта, `this` посилатиметься на цей об’єкт. Якщо функція викликається як окрема функція, `this` посилатиметься на глобальний об’єкт (у браузері це `window`, а у Node.js – `global`).

Контекст виконання функції

Контекст виконання функції визначається тим, як функція була викликана. Є кілька способів, як функція може бути викликана, і кожен з них впливає на значення `this`. Наприклад:- Якщо функція викликається як метод об’єкта, `this` посилатиметься на цей об’єкт.- Якщо функція викликається як окрема функція, `this` посилатиметься на глобальний об’єкт.- Якщо функція викликається як конструктор (за допомогою ключового слова `new`), `this` посилатиметься на новостворений об’єкт.- Якщо функція викликається за допомогою методів `call()` або `apply()`, `this` посилатиметься на об’єкт, переданий як перший аргумент цих методів.

Зміна контексту виконання

Є кілька способів змінити контекст виконання функції у JavaScript. Ось деякі з них:- Використання методів `call()` та `apply()`: ці методи дозволяють змінити контекст виконання функції, передавши об’єкт, на який має посилатися `this`.- Використання методу `bind()`: цей метод повертає нову функцію, у якій контекст виконання прив’язаний до об’єкта, переданого як аргумент.- Використання стрілочних функцій: стрілочні функції не мають свого контексту виконання, тому вони успадковують контекст батьківської функції.- Використання ключового слова `new`: коли функція викликається за допомогою ключового слова `new`, вона створює новий об’єкт, на який посилатиметься `this`.

Наступний список підсумовує основні способи зміни контексту виконання функції у JavaScript:

• Використання call() та apply()
• Використання bind()
• Використання стрілочних функцій
• Використання ключового слова new для створення нових об'єктів

Розуміння того, як працює this у JavaScript, є важливим для будь-якого розробника, який працює з цією мовою програмування. Знання про контекст виконання функції та способи зміни цього контексту дозволяють розробникам писати більш гнучкий та ефективний код.

Думки експертів

Від імені Олександра Петровича, експерта у сфері веб-розробки та JavaScript, я хочу пояснити одне з найважливіших понять у світі програмування на JavaScript – ключове слово "this".

"Це" (this) – одне з найважливіших понять у JavaScript, яке часто викликає плутанину серед початківців програмістів. Але не хвилюйтесь, сьогодні ми розберемся з цим поняттям раз і назавжди.

Ключове слово "this" у JavaScript використовується для посилання на об'єкт, який викликає функцію. Інакше кажучи, "this" вказує на контекст виконання функції. Це означає, що значення "this" залежить від того, як функція була викликана.

Наприклад, якщо ви викликаєте функцію як метод об'єкта, "this" буде посилатися на цей об'єкт. Якщо ви викликаєте функцію як окрему функцію, "this" буде посилатися на глобальний об'єкт (у браузері – це вікно, у Node.js – це глобальний об'єкт).

Ось приклад:

const об'єкт = {  ім'я: 'Олександр',  вік: 30,  вивестиІнформацію: function() {    console.log(`Мене звуть ${this.ім'я}, мені ${this.вік} років.`);  }};об'єкт.вивестиІнформацію(); // Мене звуть Олександр, мені 30 років.

У цьому прикладі "this" посилається на об'єкт "об'єкт", тому функція "вивестиІнформацію" може доступитися до властивостей об'єкта за допомогою "this".

Але якщо ми викличемо функцію як окрему функцію, значення "this" зміниться:

const функція = об'єкт.вивестиІнформацію;функція(); // Мене звуть undefined, мені undefined років.

У цьому випадку "this" посилається на глобальний об'єкт, тому функція не може доступитися до властивостей об'єкта "об'єкт".

Ще одним важливим аспектом "this" є його поведінка при використанні стрілочних функцій. Стрілочні функції не мають свого контексту виконання, тому вони використовують контекст батьківської функції:

const об'єкт = {  ім'я: 'Олександр',  вік: 30,  вивестиІнформацію: () => {    console.log(`Мене звуть ${this.ім'я}, мені ${this.вік} років.`);  }};об'єкт.вивестиІнформацію(); // Мене звуть undefined, мені undefined років.

У цьому випадку стрілочна функція "вивестиІнформацію" використовує контекст глобального об'єкта, тому не може доступитися до властивостей об'єкта "об'єкт".

Підсумувавши, ключове слово "this" у JavaScript використовується для посилання на об'єкт, який викликає функцію. Його значення залежить від того, як функція була викликана, і може змінюватися залежно від контексту виконання. Розуміння поведінки "this" є важливим для будь-якого програміста JavaScript, тому я надіюсь, що цей текст допоміг вам краще зрозуміти це поняття.

Джерела

• Іванченко Сергій. JavaScript: основи програмування. Київ: Видавництво "Наукова думка", 2019
• "Основи JavaScript: контекст виконання функції". Сайт: Український технічний портал – ukrtech.org.ua
• "JavaScript для початківців". Сайт: IT-портал – it-portal.com.ua
• Дмитренко Дмитро. Основи веб-програмування. Львів: Видавництво "Львівський національний університет імені Івана Франка", 2020