JavaScript - 物件方法

你好，未來的 JavaScript 巫師！今天，我們要一起深入探索 JavaScript 物件方法的神奇世界。拿起你的編程魔杖（键盘）和我們一起踏上這次刺激的旅程吧！

什麼是 JavaScript 物件方法？

在我們開始用物件方法施展魔法之前，先來了解一下它們是什麼。簡單來說，物件方法是屬於一個物件的函數。它們就像是我們物件擁有的特殊能力。

讓我們看一個基本的例子：

let wizard = {
name: '梅林',
castSpell: function() {
console.log('阿布拉卡達布拉！');
}
};

wizard.castSpell(); // 輸出：阿布拉卡達布拉！

在這裡，castSpell 是我們 wizard 物件的方法。當我們調用 wizard.castSpell() 時，我們的巫師就會施展他的魔法！

物件方法簡寫

現在，讓我們學習一個很酷的技巧。ES6 為我們提供了一種更短的定義物件方法的方式。這就像是一個為編寫物件方法設計的魔法捷徑！

let wizard = {
name: '梅林',
castSpell() {
console.log('阿布拉卡達布拉！');
}
};

wizard.castSpell(); // 輸出：阿布拉卡達布拉！

看我們是如何移除了 : 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 指的是 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} 施展了 ${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 物件方法的基本知識。記住，熟能生巧，所以繼續實驗這些概念。不久，你們將會像真正的 JavaScript 巫師一樣編程！願你的代碼沒有 bug，你的方法總是返回預期的輸出。開心編程！

Credits: Image by storyset