JavaScript - 对象方法

你好，未来的JavaScript法师们！今天，我们将深入JavaScript对象方法的神奇世界。拿起你的编码魔杖（键盘），让我们一起踏上这段激动人心的旅程！

什么是JavaScript对象方法？

在我们用对象方法施法之前，先来了解一下它们是什么。简单来说，对象方法是属于对象的函数。它们就像是我们对象拥有的特殊能力。

让我们来看一个基本示例：

let wizard = {
name: '梅林',
castSpell: function() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // 输出: Abracadabra!

在这里，castSpell 是我们 wizard 对象的一个方法。当我们调用 wizard.castSpell() 时，我们的法师执行了他的魔法！

对象方法简写

现在，让我们学习一个 neat 技巧。ES6 引入了一种更短的定义对象方法的方式。这就像是为编写对象方法提供了一个魔法快捷方式！

let wizard = {
name: '梅林',
castSpell() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // 输出: Abracadabra!

看到我们移除了 : function 部分了吗？它更短、更干净，就像一本组织良好的魔法书！

更新或向对象添加方法

JavaScript中的对象是灵活的。我们可以在对象创建后添加新的方法或更新现有的方法。这就像教我们的法师新的咒语！

let wizard = {
name: '梅林'
};

// 添加一个新方法
wizard.castFireball = function() {
console.log('Whoosh! Fireball launched!');
};

wizard.castFireball(); // 输出: Whoosh! Fireball launched!

// 更新一个现有方法
wizard.castFireball = function() {
console.log('Super fireball engaged!');
};

wizard.castFireball(); // 输出: Super fireball engaged!

在这个示例中，我们首先向我们的法师添加了一个 castFireball 方法，然后我们更新它以施放一个更强大的火球！

使用内置方法

JavaScript对象带有一些预安装的咒语...我是说，方法！让我们探索其中几个：

1. Object.keys()

这个方法返回一个包含给定对象自身属性名称的数组。

let spellBook = {
fireball: 'Deals fire damage',
iceBeam: 'Freezes the target',
thunderbolt: 'Electrifies the enemy'
};

console.log(Object.keys(spellBook));
// 输出: ['fireball', 'iceBeam', 'thunderbolt']

2. Object.values()

与 Object.keys() 类似，但它返回一个包含对象自身可枚举属性值的数组。

console.log(Object.values(spellBook));
// 输出: ['Deals fire damage', 'Freezes the target', 'Electrifies the enemy']

3. Object.entries()

这个方法返回一个包含给定对象自身可枚举字符串键属性 [键，值] 对的数组。

console.log(Object.entries(spellBook));
// 输出: [
//   ['fireball', 'Deals fire damage'],
//   ['iceBeam', 'Freezes the target'],
//   ['thunderbolt', 'Electrifies the enemy']
// ]

下面是一个总结这些内置方法的表格：

方法	描述	示例
Object.keys()	返回对象属性名称的数组	Object.keys(spellBook)
Object.values()	返回对象属性值的数组	Object.values(spellBook)
Object.entries()	返回对象的 [键，值] 对数组	Object.entries(spellBook)

对象方法中的 'this' 关键字

现在，让我们来讨论一个强大但有时会让人混淆的概念：this 关键字。在对象方法中，this 指的是方法所属的对象。就像对象在说“这就是我！”

let wizard = {
name: '梅林',
introduceYourself() {
console.log(`Hello, I am ${this.name}!`);
}
};

wizard.introduceYourself(); // 输出: Hello, I am Merlin!

在这个示例中，this.name 指的是 wizard 对象的 name 属性。

实际示例：施法游戏

让我们把我们所学的知识结合起来，制作一个有趣的施法游戏！

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} casts ${spell}! Mana remaining: ${this.mana}`);
} else {
console.log(`${this.name} doesn't have enough mana to cast ${spell}!`);
}
}
};

wizard.castSpell('fireball'); // 输出: Merlin casts fireball! Mana remaining: 70
wizard.castSpell('heal'); // 输出: Merlin casts heal! Mana remaining: 20
wizard.castSpell('fireball'); // 输出: Merlin doesn't have enough mana to cast fireball!

在这个游戏中，我们的法师只要有足够的法力就可以施法。castSpell 方法检查施法的法力成本，如果可能，则从中扣除法师的法力，并给我们反馈。

就这样，学徒们！你已经学习了JavaScript对象方法的基础。记住，熟能生巧，所以继续尝试这些概念。很快，你将像真正的JavaScript法师一样编码！愿你的代码无bug，你的方法总是返回预期的输出。快乐编码！

Credits: Image by storyset