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 first name is John
Или использовать стрелочную функцию:
setTimeout(() => person.greet(), 1000); // Выведет: Hello, my first 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
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ