前面幾篇有提到,可以使用函示建構式、或是 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
物件:
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()
這個原型方法其他實體是否能使用。
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
去新增。