# 【JavaScript筆記】 原型鏈 | Prototype Chain

**Published by:** [leftwest](https://paragraph.com/@leftwest/)
**Published on:** 2022-06-29
**URL:** https://paragraph.com/@leftwest/javascript-prototype-chain

## Content

首先了解物件導向 (OOP) 有兩種類型，基於類別 (class-based) 以及基於原型 (prototype-based) ，JS 屬於基於原型的語言。建構式（Constructor）使用 new 建立新的物件時，所執行的函式稱為建構式。用來初始化物件以及建立初始化屬性。const Person = function(name){ this.name = name; this.sayHi = function(){ console.log("Hi") } } // new 一個 instance const peter = new Person("peter") 了解建構式之後來看上面的程式碼有哪些問題。可以發現 Person 有個 sayHi 的函式，於是我再 new 一個人出來。const alice = new Person("alice") 然後比較兩個人的 sayHi() console.log(peter.sayHi === alice.sayHi) // false 回傳 false 代表這兩個 function 明明都是同個方法，但各占了不同的記憶體，所以這樣明顯不好。 那要怎麼辦? 我們請 prototype 出來幫我們解決。原型（Prototype）承接上面的問題，在 Person.prototype 中新增方法。const Person = function(name){ this.name = name; Person.prototype.sayHi = function(){ console.log("Hi") } 同樣的，new 出來的 instance 都有 sayHi 這個方法，這時候我們再比較一次： console.log(peter.sayHi === alice.sayHi) // true 在 JS 中，每個物件都有一個原型，物件可以從原型上繼承方法，這就是為什麼剛剛 const alice = new Person("alice") 之後，明明 alice 沒有 syaHi 這個函式卻還能使用，因為它會從 Person.prototype 去找。 而連接 alice 與 Person.prototype 靠的就是 __proto__。 也就是說 alice.proto 會指向 Person.prototype。 當 Person.prototype 找不到時，就繼續找 Person.prototype.__proto__，直到找不到回傳 null。而透過這個不斷串起來的鏈，就叫做原型鏈。tags: javascript

## Publication Information

- [leftwest](https://paragraph.com/@leftwest/): Publication homepage
- [All Posts](https://paragraph.com/@leftwest/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@leftwest): Subscribe to updates
- [Twitter](https://twitter.com/ohya576): Follow on Twitter