JavaScript - Методы объектов

Здравствуйте, будущие маги JavaScript! Сегодня мы погружаемся в магический мир методов объектов JavaScript. Возьмите свои кодовые посохи (клавиатуры) и отправляйтесь в это увлекательное путешествие вместе с нами!

Что такое методы объектов JavaScript?

Прежде чем мы начнем колдовать с методами объектов, давайте поймем, что они из себя представляют. На простом языке, методы объектов - это функции, принадлежащие объекту. Это как особые способности, которыми обладают наши объекты.

Давайте рассмотрим базовый пример:

let wizard = {
name: 'Мерлин',
castSpell: function() {
console.log('Абракадabra!');
}
};

wizard.castSpell(); // Вывод: Абракадabra!

Здесь castSpell - это метод нашего объекта wizard. Когда мы вызываем wizard.castSpell(), наш маг performs его магию!

Краткая запись методов объектов

Теперь давайте научимся классному трюку. ES6 ввел более короткий способ определения методов в объектах. Это как магическийShortcut для написания методов объектов!

let wizard = {
name: 'Мерлин',
castSpell() {
console.log('Абракадabra!');
}
};

wizard.castSpell(); // Вывод: Абракадabra!

Смотрите, как мы убрали часть : function? Это короче и чище, как хорошо организованный魔法льный справочник!

Добавление или обновление методов объекта

Объекты в JavaScript гибки. Мы можем добавлять новые методы или обновлять существующие даже после создания объекта. Это как учить нашего мага новым заклинаниям!

let wizard = {
name: 'Мерлин'
};

// Добавление нового метода
wizard.castFireball = function() {
console.log('Шшш! Запущен огненный шар!');
};

wizard.castFireball(); // Вывод: Шшш! Запущен огненный шар!

// Обновление существующего метода
wizard.castFireball = function() {
console.log('Активирован超级 огненный шар!');
};

wizard.castFireball(); // Вывод: Активирован超级 огненный шар!

В этом примере мы сначала добавили метод castFireball нашему магу, а затем обновили его, чтобы он колдовал еще более мощный огненный шар!

Использование встроенных методов

JavaScript-объекты приходят с некоторыми предустановленными заклинаниями... я имею в виду, методами! Давайте рассмотрим несколько из них:

1. Object.keys()

Этот метод возвращает массив собственных имён свойств данного объекта.

let spellBook = {
fireball: 'Наносит огненный урон',
iceBeam: 'Замораживает цель',
thunderbolt: 'Электрифицирует врага'
};

console.log(Object.keys(spellBook));
// Вывод: ['fireball', 'iceBeam', 'thunderbolt']

2. Object.values()

Похож на Object.keys(), но возвращает массив собственных перечислимых значений свойства объекта.

console.log(Object.values(spellBook));
// Вывод: ['Наносит огненный урон', 'Замораживает цель', 'Электрифицирует врага']

3. Object.entries()

Этот метод возвращает массив собственных перечислимых строковых ключевых свойств [ключ, значение] пар объекта.

console.log(Object.entries(spellBook));
// Вывод: [
//   ['fireball', 'Наносит огненный урон'],
//   ['iceBeam', 'Замораживает цель'],
//   ['thunderbolt', 'Электрифицирует врага']
// ]

Вот таблица, резюмирующая эти встроенные методы:

Метод	Описание	Пример
Object.keys()	Возвращает массив имён свойств объекта	Object.keys(spellBook)
Object.values()	Возвращает массив значений свойств объекта	Object.values(spellBook)
Object.entries()	Возвращает массив пар [ключ, значение] свойств объекта	Object.entries(spellBook)

Ключевое слово 'this' в методах объектов

Теперь давайте поговорим о мощной, но иногда сбивающей с толку концепции: ключевом слове this. В методах объектов this ссылается на объект, к которому принадлежит метод. Это как если бы объект говорил "это я!"

let wizard = {
name: 'Мерлин',
introduceYourself() {
console.log(`Здравствуйте, я ${this.name}!`);
}
};

wizard.introduceYourself(); // Вывод: Здравствуйте, я Мерлин!

В этом примере this.name ссылается на property name объекта wizard.

Практический пример: игра в колдовство

Давайте объединим все, что мы узнали, в забавную小游戏 в колдовство!

let wizard = {
name: 'Мерлин',
mana: 100,
spells: {
fireball: 30,
iceBeam: 20,
heal: 50
},
castSpell(spell) {
if (this.mana >= this.spells[spell]) {
this.mana -= this.spells[spell];
console.log(`${this.name} колдует ${spell}! Оставшееся мана: ${this.mana}`);
} else {
console.log(`${this.name} не имеет достаточно маны для колдовства ${spell}!`);
}
}
};

wizard.castSpell('fireball'); // Вывод: Мерлин колдует fireball! Оставшееся мана: 70
wizard.castSpell('heal'); // Вывод: Мерлин колдует heal! Оставшееся мана: 20
wizard.castSpell('fireball'); // Вывод: Мерлин не имеет достаточно маны для колдовства fireball!

В этой игре наш маг может колдовать заклинания, если у него есть достаточно маны. Метод castSpell проверяет стоимость маны для заклинания, вычитает её у мага, если возможно, и даёт обратную связь о действии.

И вот выучили вы, ученики! Вы узнали основы методов объектов JavaScript. Помните, что практика делает perfect, так что продолжайте экспериментировать с этими концепциями. Soon, вы будете программировать как настоящий маг JavaScript! Пусть ваш код будет свободен от ошибок, и ваши методы всегда возвращают ожидаемый результат. Счастливого кодирования!

Credits: Image by storyset