iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

JavaScript 奇奇怪怪的核心觀念系列 第 19

(Day 19) 原型與建構式

  • 分享至 

  • xImage
  •  

函式建構式建立原型

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

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

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

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

當使用 new 製作新物件時,函式建構式中的 this 則會指向這個新物件本身,因此上方範例中的 colormaterialsize 接下來都會變成物件中的屬性,並且在根據參數設定,讓物件中屬性有不同的值,這邊就夠過 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 去新增。

參考文獻

  • JavaScript 核心篇 (六角學院)

上一篇
(Day18) 原型特性與繼承
下一篇
(Day 20) Object.create 建立多層繼承
系列文
JavaScript 奇奇怪怪的核心觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言