[ES6] Class 語法,和 Extend 延伸實例

首先依照這個資源,瞭解 ECMAScript 6 class

ECMAScript 6 入门:https://es6.ruanyifeng.com/#docs/class
Javascript 物件導向子類和父類的應用等
因此開啟了我的深入淺出論文?(又臭又長的文章XD)

我寫的範例:

這邊有jsbin連結

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class People {
constructor(height, money) {
this.height = height;
this.money = money;
}
work() {
console.log('I am working');
}
play() {
console.log('I am playing');
}
//info 可以先不用看
info() {
console.log('我身高',this.height, '我有',this.money);
}
}
//----------------特殊舉例-可以先不用理會-------------------
let cMan =new People ('0cm','0元');
//----------------aMan-object---------------------
class aMan extends People {
swim() {
console.log('aMan','I am swimming');
}
};
//----------------new-aMan------------------------
let poolMan = new aMan('165cm', '5億');
//----------------bMan-object---------------------
class bMan extends People {
constructor(height, money, face) {
super(height, money);
this.face = face;
}
swim() {
console.log('bMan','I am swimming');
}
talk() {
console.log('bMan','I am talking');
}
//info 可以先不用看
info() {
console.log('我身高有',this.height, '我錢有',this.money,'我臉很',this.face);
}
};
//----------------new-bMan------------------------
let richMan = new bMan('195cm','500億','帥');

上面程式碼,不管你懂不懂,緊接著在console裡貼這段:

1
2
3
4
5
6
7
8
9
10
poolMan.info();
//我身高 165cm 我有 5億
richMan.info();
//我身高有 195cm 我錢有 500億 我臉很 帥
console.log(aMan);
//是一個fn
console.log(poolMan);
//是一個obj
console.log(cMan);
//是一個obj

講解架構

建構一個原型:人(People
再繼承這個原型,建構了兩個子原型,分別是aManbMan
jsbin連結裡面有埋一段原始碼:

1
let cMan = new People ('0cm','0元');

跟下一行,是否解讀起來功能很像:

1
2
3
4
class aMan extends People {
//....
}
let poolMan = new aMan('165cm', '5億');

幫大家釐清思緒

1
new一個模型=實作一個模型!

比照整個code解析:
第一個cMan是在父原型上的一個實作
第二個aMan是在『繼承』父原型後的一個實作!
new,就會佔據了js 裡的一個記憶體,甚至是一個位置!
那當然,依個人需求去運用,不談優劣!

觀念:new = 實作

所以new過後,js背後已經將原型
做一個新的constructor(){},並同時擁有原型的參數、function
而模型不會主動執行擁有的function!
舉例:
像是People擁有work();
new完後,work() 裡的console.log並不會執行!

接下來我們嘗試執行擁有的function!
搭配我寫的jsbin連結

請看圖示:

ES6-Class&Extends.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class People {
//這邊就是原型鍊的參數,我在這稱為特質
//有多高、有多有錢、甚至多帥?
constructor(height, money) {
this.height = height;
this.money = money;
}
work() {
console.log('I am working');
}
play() {
console.log('I am playing');
}
//info 可以先不用看
info() {
console.log('我身高',this.height, '我有',this.money);
}
}

所以上面的整個程式碼,可以分為:


特性:高、富
能力:會工作、會玩

複製原型“人”的,模組A人
特性:高、富、(想加入“帥”)
能力:會游泳

複製原型“人”的,模組B人
特質:高、富
能力:會游泳、會工作、會聊天

當我們(new)A種人,叫做窮人

1
poolMan.play();

窮人,開始執行會玩的能力(執行fn)
→這時會搜尋自己,發現自己沒有,但是先天會工作、會玩能力!(成功執行)

1
poolMan.talk();

窮人,開始執行會聊天的能力(執行fn)
→這時會搜尋自己,發現自己沒有,且先天也沒有!(變啞巴,error)
→儘管富人有這能力,但是窮人就是無法沿用!

當我們(new)B種人,叫做富人

1
richMan.work();

富人,開始執行會工作的能力(執行fn)
→這時會搜尋自己,發現自己有,就直接行使能力,不會使用先天的能力!(成功執行)

以上講解可以參考:為什麼兩個info可以吐出不同的值:

1
2
poolMan.info();
richMan.info();

特質講解(高富帥

在執行

1
2
poolMan.info();
richMan.info();

證實poolMan沒有設定constructor(){}
但是卻有兩個參數可以對應帶入

如今你想新增一個的參數(特質)?
ex:
要是B種人(模組),想要新增的參數(特質)
就得這樣寫:

1
2
3
4
5
6
7
constructor(height, money, face) {
//不管修改或是覆蓋,首先一定要加入super,讓js知道你要修改覆蓋哪個?
//謹記super一定要第一行
super(height, money);
//這邊即可新增帥的特質!
this.face = face;
}

那當然如果只這新增的特質只存在B種人(模組)上面囉!
可以嘗試poolMan 去多丟一個帥的參數!

延伸觀念:

如果針對原型People新增
也就是People模組上多一個talk的能力,那我們的窮人就不會變啞巴了!
但是要小心,牽一髮即動全身!因為延伸出來的模組A和B都會擁有talk 的能力!
改到原型的部分要很小心!
下面取自第一個連結:ECMAScript 6 入门的內容
螢幕快照 2017-11-14 下午7.00.44.png
(圖取自”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

Using “Object.create” instead of “new”

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×