本文同步分享於個人部落格：Liwen Chiou | Digital Architect & Full-Stack Engineer

📜 這裡的修煉規則：

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。
修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。
成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】

我推開門，看見你正滿頭大汗地在羊皮紙上手寫每一隻怪物受測者的屬性。

「這隻史萊姆叫小綠，血量 10...」你唸唸有詞。
「這隻叫小藍，血量 12...」

孩子，如果你要面對一萬隻史萊姆，難道你要手寫一萬次嗎？在 JavaScript 的世界裡，我們拒絕重複的體力活。你需要的是一張 「製圖模板 (Class)」。只要模板定好了，工廠就能一秒產出一整支規格統一、穿著同樣制服的史萊姆軍團。今天，我們要學會如何從「手動製作」晉升為「批量生產」。

💡 【導師講義：底層真相探究】

1. 勇者工廠 (Class) 與 實例分身 (Instance)

Class 並不是什麼神祕的咒語，它就是一間 「工廠」。你定義了工廠的規格書（Constructor），往後只要喊一聲 new，工廠就會照著規格生出一個活生生的物件。

📋 角色對照表

2. 規格書的實作：constructor

當我們寫下程式碼時，其實就是在規劃這場生產流程：

// 1. 定義工廠 (Class)
class Slime {
  constructor(name, hp) {
    this.name = name; // 定義：每個分身都要有名稱
    this.hp = hp; // 定義：每個分身都要有血量
  }

  attack() {
    console.log(`${this.name} 發動了攻擊！`);
  }
}

// 2. 呼叫工廠生出分身 (Instance)
const slimeA = new Slime("小綠", 100);
const slimeB = new Slime("大藍", 500);

slimeA.attack(); // 輸出：小綠 發動了攻擊！

3. 邏輯流向圖解

導師的圖解心法： Class 就是一張 「怪物設計圖」。你只需要定義一次「史萊姆長什麼樣子、會什麼技能」，接著你只需要呼叫 new 咒語，工廠生產線就會源源不絕地幫你把活生生的分身給捏出來。

⚔️ 【戰術對抗：學長與學弟的代碼對決】

招式示範：批量製造冒險者

❌ 冒險學弟：勞民傷財的手作法

• 負能量評級：🔴 重複代碼極多 / 🔴 難以大規模維護

const s1 = { name: '小綠', hp: 10, attack: () => {...} };
const s2 = { name: '小藍', hp: 15, attack: () => {...} };
// 如果有一百隻，學弟會當場辭職。

✅ 勇者學長：高效的模板生產

• 利潤評級：🟢 擴充極其簡單 / 🟢 規格絕對統一

class Slime {
  constructor(name, hp) {
    this.name = name;
    this.hp = hp;
  }
}

const army = [new Slime("小綠", 10), new Slime("小藍", 15)];

🏰 【勇者精英課：邁向職人的進階架構】

1. 職人的語法糖：Prototype 的真相

孩子，JS 的 Class 其實是一個美麗的「語法糖」。它的底層依然是我們之前提過的 Prototype (原型)。當你呼叫 slimeA.attack() 時，JS 會先在實體身上找，找不到再去藍圖的倉庫存儲空間找。這就是為什麼一萬隻史萊姆可以共用同一個攻擊邏輯，卻不會消耗一萬倍記憶體的秘密。

🛖 【營火叮嚀：導師的經驗談】

很多新手覺得 Class 只是把 Object 包起來而已，沒什麼大不了。

但聽著，當你的系統變複雜時，如果沒有一個統一的「制服格式」，你會發現昨天寫的小綠是用 power 當攻擊力，小藍卻是用 atk。這就是代碼生鏽的開始。

「 Class 的價值在於強制性。」 它強迫所有開發者遵守同一種協定，產出的物資才有被批量處理的價值。

天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔，而是你證明自我的舞台。去吧，公會的英雄榜在等著你的戰報。

📝 【夥伴筆記：今日修煉精華】

這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。

• Class：程式碼的生產模板 (工廠化開發)。
• Constructor：產品出生時的「規格初始化」。
• this (in class)：在 Class 內部指涉「當前這個被生出來的實體」。
• Instance：從藍圖實例化出來的具體個體。

🎯 【實戰演武場】

• 📜 本日實戰任務：類別 Class：幫你的程式碼穿上「制服」 (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務：類別 Class：幫你的程式碼穿上「制服」 (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：設計師的秩序感 (成就感發掘)：
     • 1. 看著那些屬性完全對齊、整齊劃一的軍團，你是否感受到從「搬運工」晉升為「設計師」的秩序美感？
   • 冒險者：共同進化的秘密 (理性挑戰)：[⚡ 觀念辨析]
     • 1. 如果我們在藍圖 (Prototype) 上新增了一招，為何所有已出生的分身都能同時學會？這跟「記憶體位址」有什麼關係？
3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

📚 【圖書館卷軸：延伸學習】

• MDN 官方文獻： Classes in JavaScript
• 視覺化探究： Prototype vs Class