2025-02-25-prototype是什麼？為什麼要看

---

🔍 prototype 是什麼？為什麼要看？

在 JavaScript 中，所有物件都有原型（prototype）。這個「原型」是物件的隱藏屬性，用來繼承其他物件的屬性與方法。

簡單來說：

prototype 是 JavaScript 的繼承機制，是「物件的爸爸」或「模板」。

---

🧠 為什麼看 [[Prototype]] 有用？

✅ 1. 知道物件的本質與繼承來源

範例：

const arr = [1, 2, 3]
console.log(arr)

在 Chrome DevTools 點開這個陣列 → 可以看到：

[[Prototype]]: Array(0)

你會發現：

arr.map()
arr.filter()
arr.forEach()

這些方法不是你自己寫的，是「繼承自 Array.prototype」！

---

✅ 2. 除錯時辨別是什麼類型的物件

有時候你拿到一個 object，但你不確定它是：

• 真正的 plain object？
• 還是從某個 class new 出來的？
• 或是 JSON 格式物件？

你可以：

console.log(Object.getPrototypeOf(obj))

或直接在 Chrome 點開 [[Prototype]]，就能看出來是：

• Object
• Array
• Date
• 自訂 class（例如：WeatherData）

---

✅ 3. 了解自訂物件或第三方物件的能力

如果你用了第三方函式庫（例如 Vue、Axios），
你可以：

console.dir(instance)

或：

console.log(Object.getPrototypeOf(instance))

然後你會看到：

• 這個物件有哪些方法
• 有沒有內建的特殊函數（如 .on(), .emit()）

---

💡 初學者常見誤區

錯誤觀念	正確說法
object 裡看到的方法是「自己寫的」	其實是從 prototype 繼承來的
array 可以用 .map() 是因為陣列特別	是因為繼承了 Array.prototype

---

🧪 小測驗題：你知道嗎？

const obj = {}
console.log(obj.toString) // 這是哪來的？

答：這是從 Object.prototype.toString 繼承來的。

---

✅ 結論：高階除錯、理解繼承、搞懂底層運作

所以，看 [[Prototype]] 對高階開發者來說是非常重要的技巧，可以幫助你：

• 除錯與分析物件
• 理解資料來源與方法繼承
• 寫出更有結構的程式碼

---