Методи об’єкта, "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, то його значення береться ззовні.