首先依照這個資源,瞭解 ECMAScript 6 class
ECMAScript 6 入门:https://es6.ruanyifeng.com/#docs/class
Javascript 物件導向子類和父類的應用等
因此開啟了我的深入淺出論文?(又臭又長的文章XD)
我寫的範例:
這邊有jsbin連結
1 | class People { |
上面程式碼,不管你懂不懂,緊接著在console裡貼這段:
1 | poolMan.info(); |
講解架構
建構一個原型:人(People
)
再繼承這個原型,建構了兩個子原型,分別是aMan
和bMan
在jsbin連結裡面有埋一段原始碼:
1 | let cMan = new People ('0cm','0元'); |
跟下一行,是否解讀起來功能很像:
1 | class aMan extends People { |
幫大家釐清思緒
1 | new一個模型=實作一個模型! |
比照整個code解析:
第一個cMan
是在父原型上的一個實作
第二個aMan
是在『繼承』父原型後的一個實作!
new,就會佔據了js 裡的一個記憶體,甚至是一個位置!
那當然,依個人需求去運用,不談優劣!
觀念:new = 實作
所以new過後,js背後已經將原型
做一個新的constructor(){}
,並同時擁有原型的參數、function而模型不會主動執行擁有的function!
舉例:
像是People
擁有work()
;new
完後,work()
裡的console.log
並不會執行!
接下來我們嘗試執行擁有的function!
搭配我寫的jsbin連結
請看圖示:
1 | class People { |
所以上面的整個程式碼,可以分為:
人
特性:高、富
能力:會工作、會玩
複製原型“人”的,模組A人
特性:高、富、(想加入“帥”)
能力:會游泳
複製原型“人”的,模組B人
特質:高、富
能力:會游泳、會工作、會聊天
當我們(new)A種人,叫做窮人
1 | poolMan.play(); |
窮人,開始執行會玩
的能力(執行fn)
→這時會搜尋自己
,發現自己沒有,但是先天會工作、會玩
能力!(成功執行)
1 | poolMan.talk(); |
窮人,開始執行會聊天的能力(執行fn)
→這時會搜尋自己
,發現自己沒有,且先天也沒有
!(變啞巴,error)
→儘管富人有這能力,但是窮人就是無法沿用!
當我們(new)B種人,叫做富人
1 | richMan.work(); |
富人,開始執行會工作
的能力(執行fn)
→這時會搜尋自己
,發現自己有,就直接行使能力,不會使用先天的能力!(成功執行)
以上講解可以參考:為什麼兩個info可以吐出不同的值:
1 | poolMan.info(); |
特質講解(高富帥
)
在執行
1 | poolMan.info(); |
證實poolMan沒有設定constructor(){}
但是卻有高
和富
兩個參數可以對應帶入
如今你想新增一個帥
的參數(特質)?
ex:
要是B種人(模組),想要新增帥
的參數(特質)
就得這樣寫:
1 | constructor(height, money, face) { |
那當然如果只這新增的特質只存在B種人(模組)上面囉!
可以嘗試poolMan 去多丟一個帥的參數!
延伸觀念:
如果針對原型People新增
也就是People
模組上多一個talk
的能力,那我們的窮人就不會變啞巴了!
但是要小心,牽一髮即動全身!因為延伸出來的模組A和B都會擁有talk 的能力!
改到原型的部分要很小心!
下面取自第一個連結:ECMAScript 6 入门的內容
(圖取自”ECMAScript 6 入门“)
Ref:
以下是我參考的資料
http://www.codedata.com.tw/javascript/es6-4-maximally-minimal-classes/
https://jsbin.com/wuwuxefake/edit?js,console
JavaScript Classes - ES5 vs ES6
ECMAScript 5的Object.create方法
這篇將原型鏈講得很精闢
http://disp.cc/b/11-9KEX
stackoverflow QA:
Recursive constructor invocation error can’t find solution