iT邦幫忙

第 12 屆 iThome 鐵人賽

3
Modern Web

【這些年我似是非懂的 Javascript】系列 第 34

【這些年我似是非懂的 Javascript】Prototype #建構器

今天要來分享一點關於 prototype 和建構器的部分。

建構器所 new 的不是你想的那樣

我之前在文中也提過因為 Javascript 並不會有複製的行為只會有連結的行為,
所以當你使用 new 的時候並不會有你想要的那種結果,
(你想要的應該是獨立的一個 instance 對吧!?

我們來看看以下這個範例
它叫做類別函式

function Foo(){
    // ...
}

const a = new Foo();

Foo.prototype; // {constructor: ƒ}
Object.getPrototypeOf(a) == Foo.prototype; //true

注意: 上面用的是 Foo 不是 foo 的原因是因為在 Javascript 世界中的慣例一個類別會以第 一個字母為大寫來命名。

這類別函式預設都會拿到一個特性叫做 prototype
而當上面 anew Foo() 被建立出來後他會拿到一個內部的 [[Prototype]] 連結,
它會連到 Foo.prototype 所指的物件。

所以你並沒有 new 出你要的 instances ,你只會建立出它[[Prototype]]] 的連結,
所以你不會建立出分離的東西而是緊緊連在一起的。

除此之外你會注意到 Foo.prototype 裡面還有一個東西是 constructor
它主要是用來指回該物件所關聯的函式的一個參考。
所以假如說有兩個物件一個是Foo 另一個是 Bar ,並且 Bar 繼承 Foo那他們的關係就有點像是這樣

而這種看起來像是繼承,但是不是我們知道繼承的那種精神,
它叫做原型式繼承
書中提到他在繼承前面加上原型式扭轉了它原本的意義,
這本書的作者甚至形容他~

就像是左手拿柳橙,右手拿蘋果,然後你堅持要叫他"紅色的柳橙"。

這聽起來非常怪沒錯 xD
說到底它就... 不是繼承。


以上是今天的內容
下篇應該會講一下 prototype 串鏈到底是怎麼回事~
感謝您的收看
我們下次見


參考來源:

你所不知道的 JS|範疇與 Closures,this 與物件原型 (You Don't Know JS: this & Object Prototypes))


上一篇
【這些年我似是非懂的 Javascript】那些年我睡掉的物件導向 #淺談 #Part 3
系列文
【這些年我似是非懂的 Javascript】34

尚未有邦友留言

立即登入留言