(Day 19) 原型與建構式

發表於 2021-10-03 分類於 JavaScript Core Disqus：

前面幾篇有提到，可以使用函示建構式、或是 ES 6 來建立原型，今天就來介紹使用函示建構式來建立原型。

函式建構式建立原型

前面幾篇有提到，可以使用函示建構式、或是 ES 6 來建立原型，今天就來介紹使用函示建構式來建立原型。

首先便是建立一個函示建構式

//函示建構式
function TShirt(color,material,size){
    this.color = color
    this.material = material
    this.size = size
}

雖然是函式但我們不會使用直些使用 Tshirt() 來呼叫這個函式，而是會搭配 new 來製作實體資料，使用 new 這個運算子製作出來的都一定會是物件。

當使用 new 製作新物件時，函式建構式中的 this 則會指向這個新物件本身，因此上方範例中的 color 、material 、 size 接下來都會變成物件中的屬性，並且在根據參數設定，讓物件中屬性有不同的值，這邊就夠過 new 搭配參數，來讓新增一個 BlackTShit 物件：

1 2	const BlackTShit = new TShirt('black','棉','L')

這樣便是使用 TShirt 這個函示建構式來製作 BlackTShit 物件，將 BlackTShit 的 [[Prototype]] 點開後會發現一般建立變數時都沒有的 constructor 屬性，如圖

這是因為 BlackTShit 是使用函示建構式製作，當這筆物件使用建構函示製作時，他的原型就會是 constructor ，並且也可以看到 constructor 指向的是 TShirt 這個函示。

建立原型的方法

這樣變完成一個簡單的原型鍊，不過想在原型中新增方法，是無法直接寫在函示建構式上，這邊會需要使用 prototype 來製作的原型方法，繼續以 TShirt 為例就會是：

TShirt.prototype.clothe = function() {
  console.log(`穿上 ${this.color} T Shit`);
}
BlackTShit.clothe() // 穿上 black T Shit

這時在使用 TShirt 製作一個新的實體資料，來確認 clothe() 這個原型方法其他實體是否能使用。

1 2	const darkBlueTShit= new TShirt('darkBlue','聚酯纖維','XL') darkBlueTShit.clothe() // 穿上 darkBlue T Shit

另外這邊要補充一點：當我們使用對建構函示的名稱使用 .prototype 他會回傳 constructor ，而這個 constructor 其實指向自己這個建構函示，以本次範例來說就是使用 TShirt.prototype 回傳的 constructor 就是指向 TShirt 建構函式自己，這點雖然根本次文章無關，但是在後續製作多層原型時會有使用到此觀念，於是這邊先補充了。

最後要提的一點 [[prototype]]與 prototype 差別：

[[prototype]] 物件上使用 ( chrome瀏覽器更新現在看到的是 [[prototype]] ，以前的是 __proto__ 兩者差異先前的文章有提到：
prototype 函式上使用

[[prototype]] 在 JS 中，幾乎所有資料都有 [[prototype]]，是用來連接原型的，不過他並不是真正的一個屬性，因此又被稱做『隱式原型』 implicit prototype link 。

[[prototype]] 正是因為所有資料都有這個屬性，因此直接使用 __proto__ 去做修改會導致程式碼管理上困難。

而 prototype 則只有函示上會顯示，因此若要實際為原型添加方法，會選擇使用 prototype 去新增。

參考文獻
JavaScript 核心篇 (六角學院）

函式建構式建立原型

建立原型的方法

參考文獻