Методи об’єкта, "this"

Об’єкти зазвичай створюються для представлення сутностей реального світу, таких як користувачі, замовлення тощо:

let user = { name: "Іван", age: 30 };

І в реальному світі користувач може діяти: вибрати щось із кошика для покупок, авторизуватися, виходити із системи тощо.

Дії представлені в JavaScript функціями у властивостях об’єкта.

Приклади методів

Для початку навчімо user вітатися:

let user = { name: "Іван", age: 30 }; user.sayHi = function() { alert("Привіт!"); }; user.sayHi(); // Привіт!

Тут ми щойно використали Function Expression (функціональний вираз) для створення функції та присвоїли її властивості user.sayHi об’єкта.

Потім ми викликали її завдяки user.sayHi(). Користувач тепер може говорити!

Функція, яка є властивістю об’єкта, називається його методом.

Отже, ми отримали метод sayHi об’єкта user.

Звичайно, ми могли б використовувати попередньо оголошену функцію як метод, наприклад:

let user = { // ... }; // спочатку створимо функцію function sayHi() { alert("Привіт!"); } // потім додамо її як метод user.sayHi = sayHi; user.sayHi(); // Привіт!

Скорочений запис методу

Існує коротший синтаксис для методів в літералі об’єкта:

// цей об’єкт робить те ж саме user = { sayHi: function() { alert("Привіт!"); } }; // скорочений метод виглядає краще, чи не так? user = { sayHi() { // те ж саме що й "sayHi: function(){...}" alert("Привіт!"); } };

Як було показано, ми можемо опустити "function" і написати просто sayHi().

Слід відзначити, що ці позначення не є повністю ідентичними. Існують тонкі відмінності, пов’язані з наслідуванням об’єктів (про які піде мова пізніше), але наразі вони не мають значення. Майже у всіх випадках скорочений синтаксис краще.

“this” в методах

Як правило, метод об’єкта повинен отримувати доступ до інформації, що зберігається в об’єкті, для виконання своєї роботи.

Наприклад, коду всередині user.sayHi() може знадобитися ім’я, що зберігається в об’єкті user.

Для доступу до інформації всередині об’єкта метод може використовувати ключове слово this.

Значенням this є об’єкт “перед крапкою”, який використовується для виклику методу.

Наприклад:

let user = { name: "Іван", age: 30, sayHi() { // "this" -- це "поточний об’єкт" alert(this.name); } }; user.sayHi(); // Іван

Тут під час виконання коду user.sayHi(), значенням this буде user.

Також можна отримати доступ до об’єкта без цього, посилаючись на нього через зовнішню змінну:

let user = { name: "Іван", age: 30, sayHi() { alert(user.name); // використовуємо змінну "user" замість "this" } };

…Але такий код ненадійний. Якщо ми вирішимо скопіювати user в іншу змінну, напр. admin = user перезаписати user чимось іншим, тоді цей код отримає доступ до неправильного об’єкта.

Це продемонстровано нижче:

let user = { name: "Іван", age: 30, sayHi() { alert( user.name ); // призводить до помилки } }; let admin = user; user = null; // перезапишемо значення змінної для наочності admin.sayHi(); // TypeError: Cannot read property 'name' of null

Якщо ми використовуємо this.name замість user.name всередині alert, тоді цей код буде працювати.

“this” не є фіксованим

В JavaScript, ключове слово this поводить себе не так, як в більшості мов програмування.

В цьому коді немає синтаксичної помилки:

function sayHi() { alert( this.name ); }

Значення this обчислюється під час виконання і залежить від контексту.

Наприклад, тут одна й та ж функція призначена двом різним об’єктам і має різний “this” при викликах:

let user = { name: "Іван" }; let admin = { name: "Адмін" }; function sayHi() { alert( this.name ); } // використовуємо одну і ту ж функцію у двох об’єктах user.f = sayHi; admin.f = sayHi; // виклики функцій, приведені нижче, мають різні this // "this" всередині функції є посиланням на об’єкт "перед крапкою" user.f(); // Іван (this == user) admin.f(); // Адмін (this == admin) admin['f'](); // Адмін (неважливо те, як звертатися до методу об’єкта -- через крапку чи квадратні дужки)

Правило просте: якщо obj.f() викликано, то this це obj під час виконання f. Так що в даному прикладі це user або admin.

function sayHi() { alert(this); } sayHi(); // undefined

Стрілкові функції не мають “this”

Стрілкові функції особливі: у них немає “свого” this. Якщо ми посилаємось на this з такої функції, його значення береться із зовнішньої “нормальної” функції.

Наприклад, тут arrow() використовує this із зовнішнього user.sayHi() методу:

let user = { firstName: "Ілля", sayHi() { let arrow = () => alert(this.firstName); arrow(); } }; user.sayHi(); // Ілля

Це особливість стрілкових функцій є корисною коли ми не хочемо мати окреме this, а лише взяти його із зовнішнього контексту. Далі в главі Повторення стрілкових функцій ми детальніше розглянемо стрілкові функції.

Підсумки

• Функції, які зберігаються у властивостях об’єкта, називаються “методами”.

• Методи дозволяють об’єктам “діяти” подібно до object.doSomething().

• Методи можуть посилатися на об’єкт завдяки this.

• Значення this визначається під час виконання.

• Коли функція оголошена, вона може використовувати this, але саме this не має значення, доки функція не буде викликана.

• Функцію можна копіювати між об’єктами.

• Коли функція викликається в синтаксисі “методу”: object.method(), значення this під час виклику є object – об’єкт перед крапкою.

Зверніть увагу, що стрілкові функції є особливими: у них немає this. Коли всередині стрілкової функції звертаються до this, то його значення береться ззовні.