Пошук уроків, статей та іншого контенту
Додаватимете методи екземпляра та викликатимете їх для роботи зі станом об’єкта.
Метод екземпляра — це функція, яку можна викликати для конкретного об’єкта, створеного на основі класу.
Методи екземпляра зазвичай працюють зі станом об’єкта через this:
this.propertythis посилається на екземпляр, для якого викликано метод.
Наприклад, клас User може мати властивість name і метод greet():
class User {
constructor(name) {
this.name = name;
}
greet() {
return `Привіт, мене звати ${this.name}`;
}
}
const user = new User("Олена");
console.log(user.greet());
// Привіт, мене звати ОленаУ цьому прикладі:
User — клас;
user — екземпляр класу User;
name — стан екземпляра;
greet() — метод екземпляра;
this.name — звернення до властивості поточного екземпляра.
Методи оголошують усередині класу без ключового слова function:
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
getInfo() {
return `${this.name}: ${this.price} грн`;
}
applyDiscount(percent) {
this.price -= this.price * percent / 100;
}
}У класі Product є два методи:
getInfo() повертає інформацію про товар;
applyDiscount() змінює його ціну.
Створимо екземпляр і викличемо методи:
const product = new Product("Навушники", 2000);
console.log(product.getInfo());
// Навушники: 2000 грн
product.applyDiscount(10);
console.log(product.getInfo());
// Навушники: 1800 грнМетод applyDiscount() змінив властивість price. Наступний виклик getInfo() уже використовує нове значення.
Методи екземпляра можуть не лише повертати значення, а й змінювати властивості об’єкта.
Розглянемо клас банківського рахунку:
class BankAccount {
constructor(owner, initialBalance = 0) {
this.owner = owner;
this.balance = initialBalance;
}
deposit(amount) {
if (amount <= 0) {
return "Сума поповнення має бути більшою за нуль";
}
this.balance += amount;
return `Рахунок поповнено на ${amount} грн`;
}
withdraw(amount) {
if (amount <= 0) {
return "Сума зняття має бути більшою за нуль";
}
if (amount > this.balance) {
return "Недостатньо коштів";
}
this.balance -= amount;
return `З рахунку знято ${amount} грн`;
}
getBalance() {
return `Баланс рахунку: ${this.balance} грн`;
}
}
const account = new BankAccount("Марія", 1000);
console.log(account.getBalance());
// Баланс рахунку: 1000 грн
console.log(account.deposit(500));
// Рахунок поповнено на 500 грн
console.log(account.withdraw(200));
// З рахунку знято 200 грн
console.log(account.getBalance());
// Баланс рахунку: 1300 грнМетоди deposit() і withdraw() змінюють this.balance. Метод getBalance() лише читає поточний стан і повертає його у вигляді тексту.
Кожен екземпляр має власний стан. Зміна одного об’єкта не змінює інші екземпляри цього класу:
class Counter {
constructor(start = 0) {
this.value = start;
}
increment() {
this.value += 1;
}
getValue() {
return this.value;
}
}
const firstCounter = new Counter();
const secondCounter = new Counter(10);
firstCounter.increment();
firstCounter.increment();
console.log(firstCounter.getValue());
// 2
console.log(secondCounter.getValue());
// 10Обидва об’єкти мають методи increment() і getValue(), але властивість value у кожного з них окрема.
Методи можуть приймати параметри так само, як звичайні функції:
class Message {
constructor(text) {
this.text = text;
}
repeat(times) {
return this.text.repeat(times);
}
}
const message = new Message("JavaScript ");
console.log(message.repeat(3));
// JavaScript JavaScript JavaScriptПараметр times визначає, скільки разів повторити текст, а this.text містить стан конкретного екземпляра.
Метод екземпляра може викликати інший метод цього самого екземпляра через this:
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {
return this.width * this.height;
}
getDescription() {
return `Площа прямокутника: ${this.getArea()}`;
}
}
const rectangle = new Rectangle(5, 3);
console.log(rectangle.getDescription());
// Площа прямокутника: 15У методі getDescription() викликається this.getArea(). Це означає: «виклич метод getArea() для поточного екземпляра».
thisЗначення this залежить від способу виклику методу:
class User {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Привіт, ${this.name}`);
}
}
const user = new User("Андрій");
user.sayHello();
// Привіт, АндрійПід час виклику user.sayHello() this посилається на user.
Метод варто викликати через екземпляр:
user.sayHello();Якщо зберегти метод в окрему змінну, він може втратити правильний контекст:
const sayHello = user.sayHello;
// У строгому режимі this буде undefined
// sayHello();Щоб зберегти контекст, можна використати bind():
const sayHello = user.sayHello.bind(user);
sayHello();
// Привіт, АндрійНа початковому етапі найпростіше викликати метод безпосередньо через об’єкт.
Методи екземпляра можуть бути й у звичайних об’єктах. У такому разі методом є властивість, яка містить функцію:
const cart = {
items: [],
addItem(item) {
this.items.push(item);
},
getItemCount() {
return this.items.length;
}
};
cart.addItem("Книга");
cart.addItem("Зошит");
console.log(cart.getItemCount());
// 2Тут cart — конкретний об’єкт, а addItem() і getItemCount() — його методи. Для створення багатьох однотипних об’єктів зручно використовувати клас.
У класі методи записують у скороченому синтаксисі:
class User {
sayHello() {
return "Привіт";
}
}Не потрібно писати так:
class User {
// Такий синтаксис для методу класу не використовується
// function sayHello() {}
}Стрілкові функції мають особливу поведінку this: вони не створюють власний this, а використовують його із зовнішнього контексту. Для звичайних методів класу зазвичай використовують стандартний синтаксис методу.
thisclass User {
constructor(name) {
this.name = name;
}
getName() {
return name;
}
}У методі getName() змінна name не оголошена. Потрібно звернутися до властивості екземпляра:
class User {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}Метод потрібно викликати з дужками:
user.sayHello();Запис без дужок лише отримує посилання на функцію:
const method = user.sayHello;const user = new User("Олена");
user.greet();Метод greet() має бути оголошений у класі User. Якщо його немає, JavaScript повідомить про помилку.
Властивість зберігає дані:
this.name = "Олена";Метод виконує дію:
getName() {
return this.name;
}Не слід викликати властивість як функцію:
// Помилка, якщо name — рядок
// user.name();thisЯкщо передати метод як callback, контекст може бути втрачено:
class Timer {
constructor() {
this.seconds = 0;
}
increase() {
this.seconds += 1;
}
}
const timer = new Timer();
const callback = timer.increase;
// callback(); // this може бути undefinedДля збереження контексту використовуйте bind() або викликайте метод через екземпляр:
const callback = timer.increase.bind(timer);
callback();
console.log(timer.seconds);
// 1Створіть клас TodoList, який зберігає список завдань у властивості tasks.
Додайте методи:
addTask(task) — додає завдання;
removeTask(task) — видаляє завдання;
getTasks() — повертає всі завдання;
getTaskCount() — повертає кількість завдань.
Приклад очікуваного використання:
const todoList = new TodoList();
todoList.addTask("Вивчити класи");
todoList.addTask("Написати практичне завдання");
console.log(todoList.getTaskCount());
// 2
todoList.removeTask("Вивчити класи");
console.log(todoList.getTasks());
// ["Написати практичне завдання"]Метод екземпляра — це функція, яку викликають для конкретного об’єкта.
Методи класу оголошують без ключового слова function.
Для доступу до стану екземпляра використовують this.
Метод може читати або змінювати властивості об’єкта.
Кожен екземпляр має власний стан.
Один метод може викликати інший через this.
Виклик методу зазвичай має вигляд object.method().
Потрібно стежити за значенням this, особливо під час передавання методу як callback.