什麼是 constructor function建構子函式

建構子函式是一個由普通函式與new關鍵字組合而成的函式，而該函式就像是一個藍圖一樣，要透過new關鍵字才能建立一個真正的instance(object)。
其主要用途是用於建立物件，而非一般的函式。

而建構子函示 .prototype 可以查看透過建構子函式所建立的object的prototype。

如何建立一個instance

Person() {
    this.name = 'Andy'
}
Person.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
}

const person1 = new Person();
console.log(person1.__proto__); 
// 透過__proto__可以得到Person.prototype
console.log(Person.prototype);
// 可以得到由Person()定義的prototype

可以透過這種方法達到建立多個如person的實例，例如：可以對各個object 實例的name設定不同人名，另外還可以對其prototype設定method，這樣多個實例被創建時就可以使用同一個method，而不用在建構函式中定義method，造成在建立instance時創建多個相同的method。

new 一個instance的流程

1. 用new 建立一個空的object
2. constructor function(建構子函式)被執行時會把這個函式的this及constructor指向到步驟一的空object中。
3. 這樣可以在新的object中看到被設定在constructor function中的this.name = ‘Andy’(屬性)
4. 而這個該object會被linked到constructor function的prototype。
5. 當建立好之後，可以透過 .__proto__ 取得這個object的prototype。

prototype Chain

prototype chain是一個object的連結，在object中可以透過__proto__取得，而該object可以一路透過 __proto__ 取得其prototype，而其可以繼承多層的prototype，可以一路透過 __proto___ 取得每一層的prototype，並且可以使用其繼承的method。

以Array來說，當建立一個array之後，可以透過__proto__取得到Array.prototype，然後透過__proto__取得到Object.prototype，最後透過__proto__取得到null，所以可以透過__proto__取得到Object.prototype的所有method。

const arr = [1,2,3];
console.log(arr.__proto__);
// 可以透過__proto__取得到Array.prototype
console.log(Array.prototype);
// 可以透過__proto__取得到Object.prototype
console.log(Object.prototype);
// 可以透過__proto__取得到null

以Person的例子來說，可以透過__proto__取得到Person.prototype，然後透過多一層__proto__取得到Object.prototype，最後透過__proto__取得到null，所以可以透過__proto__取得到Object.prototype的所有method。

const person = new Person();
console.log(person.__proto__);
// 可以透過__proto__取得到Person.prototype
console.log(person.__proto__.__proto__);
// 可以透過__proto__取得到Object.prototype
console.log(person.__proto__.__proto__.__proto__);
// 可以透過__proto__取得到null
console.log(Person.prototype);
// 可以透過 .prototype 取得到Person.prototype
console.log(Object.prototype);

所以這些object都是以prototype chain的方式來繼承的，所以可以透過__proto__取得Object.prototype的所有method。

參考資料

JS 核心 – 使用建構式自定義原型
[筆記] 談談 JavaScript 中的 function constructor 和關鍵字 new