7.1 Створення методів об'єкта
Методи об'єкта в JavaScript є функціями, які пов'язані з об'єктами та можуть виконувати дії над цими об'єктами. Методи дозволяють об'єктам мати свою поведінку, що робить їх важливою частиною об'єктно-орієнтованого програмування. Нижче ми розглянемо створення та використання методів об'єктів.
Методи об'єкта можна створювати кількома способами. Розглянемо основні з них.
1. Літерал об'єкта
Методи можна створювати безпосередньо в літералі об'єкта, використовуючи функції.
У цьому прикладі об'єкт person має метод greet(), який повертає рядок із використанням властивості name об'єкта:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Виведе: Hello, my name is John
2. Скорочений синтаксис методів
З ES6 з'явився скорочений синтаксис для створення методів об'єкта.
Цей синтаксис робить код більш лаконічним і легким для читання:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Виведе: Hello, my name is John
3. Додавання методів після створення об'єкта
Методи можуть бути додані в об'єкт після його створення.
У цьому прикладі метод greet() додається в об'єкт person після його створення:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Виведе: Hello, my name is John
4. Використання функції-конструктора
Функція-конструктор дозволяє створювати методи для всіх екземплярів об'єкта.
У цьому прикладі метод greet() створюється для кожного екземпляра об'єкта, створеного за допомогою функції-конструктора Person():
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Виведе: Hello, my name is John
console.log(jane.greet()); // Виведе: Hello, my name is Jane
7.2 Використання методів об'єкта
1. Доступ до методів через крапку
Методи об'єкта можна викликати за допомогою синтаксису крапки:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Виведе: Hello, my name is John
2. Доступ до методів через квадратні дужки
Методи об'єкта також можна викликати за допомогою квадратних дужок:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Виведе: Hello, my name is John
3. Виклик методу всередині іншого методу
Методи об'єкта можуть викликати інші методи цього ж об'єкта.
У цьому прикладі методи sum() і mul() використовують значення, встановлені методом setValues():
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Виведе: 5
console.log(calculator.mul()); // Виведе: 6
4. Використання this в методах
Ключове слово this в методах об'єкта посилається на сам об'єкт, що дозволяє звертатися до його властивостей і інших методів:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Виведе: Brand: Toyota, Model: Camry
5. Передача методів як колбеків
Коли методи об'єкта передаються як колбеки, важливо враховувати значення this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Виведе: Hello, my name is undefined
У цьому прикладі значення this втрачено, коли метод greet() передається як колбек у setTimeout(). У результаті this всередині greet() посилається на глобальний об'єкт window. У браузерах об'єкт window має властивість name, яке за замовчуванням є порожнім рядком "". Тому виводиться "Hello, my name is". Щоб зберегти правильне значення this, можна використати метод bind(), який прив'язує функцію до певного контексту:
setTimeout(person.greet.bind(person), 1000); // Виведе: Hello, my name is John
Або використовувати стрілкову функцію:
setTimeout(() => person.greet(), 1000); // Виведе: Hello, my name is John
7.3 Спільне використання методів
1. Наслідування методів через прототипи
Методи можна додавати в прототипи об'єктів, щоб вони були доступні всім екземплярам:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Виведе: Hello, my name is John
console.log(jane.greet()); // Виведе: Hello, my name is Jane
2. Використання методів з інших об'єктів
Методи одного об'єкта можуть бути викликані для іншого об'єкта з використанням методу call() або apply():
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Виведе: Hello, my name is Jane
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ