class聲明
class 是 ES6 模仿面向?qū)ο笳Z(yǔ)言(C++, Java)提出的定義類的方法。形式類似 C++ 和 Java (各取所長(zhǎng)), 下面例子展示了 class 是如何定義構(gòu)造函數(shù)、對(duì)象屬性和對(duì)象動(dòng)/靜態(tài)方法的：
class Point{
constructor(x, y){ //定義構(gòu)造函數(shù)
this.x = x; //定義屬性x
this.y = y; //定義屬性y
} //這里沒(méi)有逗號(hào)
toString(){ //定義動(dòng)態(tài)方法，不需要 function 關(guān)鍵字
return `(${this.x},${this.y})`;
}
static show(){ //利用 static 關(guān)鍵字定義靜態(tài)方法
console.log("Static function!");
}
}
var p = new Point(1,4);
console.log(p+""); //(1,4)
console.log(typeof Point); //"function"
console.log(Point.prototype.constructor === Point); //true
console.log(Point.prototype.constructor === p.constructor); //true
Point.show(); //"Static function!"
相當(dāng)于傳統(tǒng)寫(xiě)法：
function Point(x, y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function(){
return `(${this.x},${this.y})`;
}
Point.show = function(){
console.log("Static function!");
}
var p = new Point(1,4);
console.log(p+""); //(1,4)
這里不難看出，class 的類名就是 ES5 中的構(gòu)造函數(shù)名，靜態(tài)方法就定義在其上，而類的本質(zhì)依然是個(gè)函數(shù)。而 class 中除了 constructor 是定義的構(gòu)造函數(shù)以外，其他的方法都定義在類的 prototype 上，這都和 ES5 是一致的，這就意味著，ES5 中原有的那些方法都可以用, 包括但不限于:
-
Object.keys(),Object.assign()等等 - 而且 class 也同樣支持表達(dá)式做屬性名，比如 Symbol
- ES5 函數(shù)具有的屬性/方法：length、name、apply、call、bind、arguments 等等
但有些細(xì)節(jié)還是有區(qū)別的，比如：
class Point{
constructor(x, y){ //定義構(gòu)造函數(shù)
this.x = x; //定義屬性x
this.y = y; //定義屬性y
} //這里沒(méi)有逗號(hào)
toString(){ //定義動(dòng)態(tài)方法，不需要 function 關(guān)鍵字
return `(${this.x},${this.y})`;
}
getX(){
return this.x;
}
getY(){
return this.y;
}
}
var p = new Point(1,4);
var keys = Object.keys(Point.prototype);
var ownKeys = Object.getOwnPropertyNames(Point.prototype);
console.log(keys); //[]
console.log(ownKeys); //["constructor", "toString", "getX", "getY"]
console.log(p.hasOwnProperty("toString")); //false
console.log(p.__proto__.hasOwnProperty("toString")); //true
//ES5
function Point(x, y){
this.x = x;
this.y = y;
}
Point.prototype = {
toString(){
return '(' + this.x + ',' + this.y + ')';
},
getX(){
return this.x;
},
getY(){
return this.y;
}
}
var p = new Point(1,4);
var keys = Object.keys(Point.prototype);
var ownKeys = Object.getOwnPropertyNames(Point.prototype);
console.log(keys); //["toString", "getX", "getY"]
console.log(ownKeys); //["toString", "getX", "getY"]
console.log(p.hasOwnProperty("toString")); //false
console.log(p.__proto__.hasOwnProperty("toString")); //true
這個(gè)例子說(shuō)明，class 中定義的動(dòng)態(tài)方法是不可枚舉的，并且 constructor 也是其自有方法中的一個(gè)。
使用 class 注意一下幾點(diǎn)：
- class 中默認(rèn)是嚴(yán)格模式，即使不寫(xiě)
"use strict。關(guān)于嚴(yán)格模式可以看：嚴(yán)格模式特點(diǎn) - 同名 class 不可重復(fù)聲明
- class 相當(dāng)于 object 而不是 map，不具有 map 屬性，也不具有默認(rèn)的 Iterator。
- constructor 方法在 class 中是必須的，如果沒(méi)有認(rèn)為指定，系統(tǒng)會(huì)默認(rèn)生成一個(gè)空的 constructor
- 調(diào)用 class 定義的類必須有 new 關(guān)鍵字，像普通函數(shù)那樣調(diào)用會(huì)報(bào)錯(cuò)。ES5 不限制這一點(diǎn)。
TypeError: Class constructor Point cannot be invoked without 'new'
- constructor 方法默認(rèn)返回值為 this，可以認(rèn)為修改返回其他的值，但這會(huì)導(dǎo)致一系列奇怪的問(wèn)題：
class Point{
constructor(x,y){
return [x, y];
}
}
new Point() instanceof Point; //false
- class 聲明類不存在變量提升
new Point(); //ReferenceError: Point is not defined
class Point{}
class 表達(dá)式
這個(gè)和面向?qū)ο蟛灰粯恿耍琷s 中函數(shù)可以有函數(shù)聲明形式和函數(shù)表達(dá)式2種方式定義，那么 class 一樣有第二種2種定義方式：class 表達(dá)式
var className1 = class innerName{
//...
};
let className2 = class innerName{
//...
};
const className3 = class innerName{
//...
};
class 表達(dá)式由很多特性和 ES5 一樣：
- 和函數(shù)表達(dá)式類似，這里的innerName可以省略，而且innerName只有類內(nèi)部可見(jiàn)，實(shí)際的類名是賦值號(hào)前面的 className。
- 這樣定義的類的作用域，由其所在位置和聲明關(guān)鍵字(var, let, const)決定
- const申明的類是個(gè)常量，不能修改。
- 其變量聲明存在提升，但初始化不提升
- class 表達(dá)式也不能和 class 申明重名
ES5 中有立即執(zhí)行函數(shù)，類似的，這里也有立即執(zhí)行類：
var p = new class {
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return `(${this.x},${this.y})`;
}
}(1,5); //立即生成一個(gè)對(duì)象
console.log(p+""); //(1,5)
getter, setter 和 Generator 方法
getter 和 setter 使用方式和 ES5 一樣, 這里不多說(shuō)了，舉個(gè)例子一看就懂：
class Person{
constructor(name, age, tel){
this.name = name;
this.age = age;
this.tel = tel;
this._self = {};
}
get id(){
return this._self.id;
}
set id(str){
if(this._self.id){
throw new TypeError("Id is read-only");
} else {
this._self.id = str;
}
}
}
var p = new Person("Bob", 18, "13211223344");
console.log(p.id); //undefined
p.id = '30010219900101009X';
console.log(p.id); //'30010219900101009X'
var descriptor = Object.getOwnPropertyDescriptor(Person.prototype, 'id');
console.log('set' in descriptor); //true
console.log('get' in descriptor); //true
p.id = '110'; //TypeError: Id is read-only
Generator 用法也和 ES6 Generator 部分一樣：
class Person{
constructor(name, age, tel){
this.name = name;
this.age = age;
this.tel = tel;
this._self = {};
}
*[Symbol.iterator](){
var keys = Object.keys(this);
keys = keys.filter(function(item){
if(/^_/.test(item)) return false;
else return true;
});
for(let item of keys){
yield this[item];
}
}
get id(){
return this._self.id;
}
set id(str){
if(this._self.id){
throw new TypeError("Id is read-only");
} else {
this._self.id = str;
}
}
}
var p = new Person("Bob", 18, "13211223344");
p.id = '30010219900101009X';
for(let info of p){
console.log(info); //依次輸出: "Bob", 18, "13211223344"
}
class 的繼承
這里我們只重點(diǎn)講繼承，關(guān)于多態(tài)沒(méi)有新的修改，和 ES5 中一樣，在函數(shù)內(nèi)判斷參數(shù)即可。關(guān)于多態(tài)可以閱讀對(duì)象、類與原型鏈中關(guān)于多態(tài)重構(gòu)的部分。
此外，class 繼承屬于 ES5 中多種繼承方式的實(shí)例繼承，關(guān)于共享原型也在上面這篇文章中講解過(guò)。
class 實(shí)現(xiàn)繼承可以簡(jiǎn)單的通過(guò) extends 關(guān)鍵字實(shí)現(xiàn), 而使用 super 關(guān)鍵字調(diào)用父類方法：
//定義 '有色點(diǎn)'' 繼承自 '點(diǎn)'
class ColorPoint extends Point{ //這里延用了上面定義的 Point 類
constructor(x, y, color){
super(x, y); //利用 super 函數(shù)調(diào)用父類的構(gòu)造函數(shù)
this.color = color;
}
toString(){
return `${super.toString()},${this.color}`; //利用 super 調(diào)用父類的動(dòng)態(tài)方法
}
}
var cp = new ColorPoint(1, 5, '#ff0000');
console.log(cp+""); //(1,5),#ff0000
ColorPoint.show(); //"Static function!" 靜態(tài)方法同樣被繼承了
cp instanceof ColorPoint; //true
cp instanceof Point; //true
使用 extends 繼承的時(shí)候需要注意一下幾點(diǎn)：
- super 不能單獨(dú)使用，不能訪問(wèn)父類屬性，只能方法父類方法和構(gòu)造函數(shù)(super本身)
- 子類沒(méi)有自己的 this，需要借助 super 調(diào)用父類構(gòu)造函數(shù)后加工得到從父類得到的 this，子類構(gòu)造函數(shù)必須調(diào)用 super 函數(shù)。這一點(diǎn)和 ES5 完全不同。
- 子類如果沒(méi)有手動(dòng)定義構(gòu)造函數(shù)，會(huì)自動(dòng)生成一個(gè)構(gòu)造函數(shù)，如下：
constructor(...args){
super(...args);
}
- 子類中使用 this 關(guān)鍵字之前，必須先調(diào)用 super 構(gòu)造函數(shù)
- 由于繼承屬于共享原型的方式，所以不要在實(shí)例對(duì)象上修改原型(
Object.setPrototypeOf,obj.__proto__等) - super 也可以用在普通是對(duì)象字面量中：
var obj = {
toString(){
return `MyObj ${super.toString()}`;
}
}
console.log(obj+""); //MyObj [object Object]
prototype 和 __proto__
在 class 的繼承中
- 子類的
__proto__指向其父類 - 子類 prototype 的
__proto__指向其父類的 prototype
class Point{
constructor(x, y){
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point{
constructor(x, y, color){
super(x, y);
this.color = color;
}
}
ColorPoint.__proto__ === Point; //true
ColorPoint.prototype.__proto__ === Point.prototype; //true
其等價(jià)的 ES5 是這樣的：
function Point(){
this.x = x;
this.y = y;
}
function ColorPoint(){
this.x = x;
this.y = y;
this.color = color;
}
Object.setPrototypeOf(ColorPoint.prototype, Point.prototype); //繼承動(dòng)態(tài)方法屬性
Object.setPrototypeOf(ColorPoint, Point); //繼承靜態(tài)方法屬性
ColorPoint.__proto__ === Point; //true
ColorPoint.prototype.__proto__ === Point.prototype; //true
這里我們應(yīng)該理解一下3種繼承的 prototype 和 __proto__：
- 沒(méi)有繼承
class A{}
A.__proto__ === Function.prototype; //true
A.prototype.__proto__ === Object.prototype; //true
- 繼承自 Object
class A extends Object{}
A.__proto__ === Object; //true
A.prototype.__proto__ === Object.prototype; //true
- 繼承自 null
class A extends null{}
A.__proto__ === Function.prototype; //true
A.prototype.__proto__ === undefined; //true
判斷類的繼承關(guān)系：
class A{}
class B extends A{}
Object.getPrototypeOf(B) === A; //true
子類的實(shí)例的 __proto__ 的 __proto__ 指向其父類實(shí)例的 __proto__
class A{}
class B extends A{}
var a = new A();
var b = new B();
B.__proto__.__proto__ === A.__proto__; //true
因此，可以通過(guò)修改子類實(shí)例的 __proto__.__proto__ 改變父類實(shí)例的行為。建議：
- 總是用 class 取代需要 prototype 的操作。因?yàn)?class 的寫(xiě)法更簡(jiǎn)潔，更易于理解。
- 使用 extends 實(shí)現(xiàn)繼承，因?yàn)檫@樣更簡(jiǎn)單，不會(huì)有破壞 instanceof 運(yùn)算的危險(xiǎn)。
此外存取器和 Generator 函數(shù)都可以很理想的被繼承：
class Person{
constructor(name, age, tel){
this.name = name;
this.age = age;
this.tel = tel;
this._self = {};
}
*[Symbol.iterator](){
var keys = Object.keys(this);
keys = keys.filter(function(item){
if(/^_/.test(item)) return false;
else return true;
});
for(let item of keys){
yield this[item];
}
}
get id(){
return this._self.id;
}
set id(str){
if(this._self.id){
throw new TypeError("Id is read-only");
} else {
this._self.id = str;
}
}
}
class Coder extends Person{
constructor(name, age, tel, lang){
super(name, age, tel);
this.lang = lang;
}
}
var c = new Coder("Bob", 18, "13211223344", "javascript");
c.id = '30010219900101009X';
for(let info of c){
console.log(info); //依次輸出: "Bob", 18, "13211223344", "javascript"
}
console.log(c.id); //'30010219900101009X'
c.id = "110"; //TypeError: Id is read-only
多繼承
多繼承指的是一個(gè)新的類繼承自已有的多個(gè)類，JavaScript 沒(méi)有提供多繼承的方式，所以我們使用 Mixin 模式手動(dòng)實(shí)現(xiàn)：
function mix(...mixins){
class Mix{}
for(let mixin of mixins){
copyProperties(Mix, mixin); //繼承靜態(tài)方法屬性
copyProperties(Mix.prototype, mixin.prototype); //繼承動(dòng)態(tài)方法屬性
}
return Mix;
function copyProperties(target, source){
for(let key of Reflect.ownKeys(source)){
if(key !== 'constructor' && key !== "prototype" && key !== "name"){
if(Object(source[key]) === source[key]){
target[key] = {};
copyProperties(target[key], source[key]); //遞歸實(shí)現(xiàn)深拷貝
} else {
let desc = Object.getOwnPropertyDescriptor(source, key);
Object.defineProperty(target, key, desc);
}
}
}
}
}
//使用方法：
class MultiClass extends mix(superClass1, superClass2, /*...*/){
//...
}
由于 mixin 模式使用了拷貝構(gòu)造，構(gòu)造出的子類的父類是 mix 函數(shù)返回的 class, 因此 prototype 和 __proto__ 與任一 superClass 都沒(méi)有直接的聯(lián)系，instanceof 判斷其屬于 mix 函數(shù)返回類的實(shí)例，同樣和任一 superClass 都沒(méi)有關(guān)系。可以這么說(shuō)：我們?yōu)榱藢?shí)現(xiàn)功能破壞了理論應(yīng)該具有的原型鏈。
原生構(gòu)造函數(shù)繼承
在 ES5 中，原生構(gòu)造函數(shù)是不能繼承的，包括： Boolean(), Number(), Date(), String(), Object(), Error(), Function(), RegExp()等，比如我們這樣實(shí)現(xiàn)：
function SubArray(){}
Object.setPrototypeOf(SubArray.prototype, Array.prototype); //繼承動(dòng)態(tài)方法
Object.setPrototypeOf(SubArray, Array); //繼承靜態(tài)方法
var arr = new SubArray();
arr.push(5);
arr[1] = 10;
console.log(arr.length); //1 應(yīng)該是2
arr.length = 0;
console.log(arr); //[0:5,1:10] 應(yīng)該為空
很明顯這已經(jīng)不是那個(gè)我們熟悉的數(shù)組了！我們可以用 class 試試：
class SubArray extends Array{}
var arr = new SubArray();
arr.push(5);
arr[1] = 10;
console.log(arr.length); //2
arr.length = 0;
console.log(arr); //[]
還是熟悉的味道，對(duì)吧！這就和之前提到的繼承差異有關(guān)了，子類沒(méi)有自己的 this，需要借助 super 調(diào)用父類構(gòu)造函數(shù)后加工得到從父類得到的 this，子類構(gòu)造函數(shù)必須調(diào)用 super 函數(shù)。而 ES5 中先生成子類的 this，然后把父類的 this 中的屬性方法拷貝過(guò)來(lái)，我們都知道，有的屬性是不可枚舉的，而有的屬性是 Symbol 名的，這些屬性不能很好的完成拷貝，就會(huì)導(dǎo)致問(wèn)題，比如 Array 構(gòu)造函數(shù)的內(nèi)部屬性 [[DefineOwnProperty]]。
利用這個(gè)特性，我們可以定義自己的合適的類, 比如一個(gè)新的錯(cuò)誤類：
class ExtendableError extends Error{
constructor(message){
super(message);
this.stack = new Error().stack;
this.name = this.constructor.name;
}
}
throw new ExtendableError("test new Error"); //ExtendableError: test new Error
靜態(tài)屬性
為何靜態(tài)屬性需要單獨(dú)寫(xiě)，而靜態(tài)方法直接簡(jiǎn)單帶過(guò)。因?yàn)檫@是個(gè)兼容性問(wèn)題，目前 ES6 的靜態(tài)方法用 static 關(guān)鍵字，但是靜態(tài)屬性和 ES5 一樣，需要單獨(dú)定義:
class A{}
A.staticProperty = "staticProperty";
console.log(A.staticProperty); //"staticProperty"
不過(guò) ES7 提出可以在 class 內(nèi)部實(shí)現(xiàn)定義，可惜目前不支持，但是還好有 babel 支持：
class A{
static staticProperty = "staticProperty"; //ES7 靜態(tài)屬性
instanceProperty = 18; //ES7 實(shí)例屬性
}
console.log(A.staticProperty); //"staticProperty"
console.log(new A().instanceProperty); //18
new.target 屬性
new 本來(lái)是個(gè)關(guān)鍵字，但 ES6 給它添加了屬性——target。該屬性只能在構(gòu)造函數(shù)中使用，用來(lái)判斷構(gòu)造函數(shù)是否作為構(gòu)造函數(shù)調(diào)用的, 如果構(gòu)造函數(shù)被 new 調(diào)用返回構(gòu)造函數(shù)本身，否則返回 undefined：
function Person(){
if(new.target){
console.log("constructor has called");
} else {
console.log("function has called");
}
}
new Person(); //"constructor has called"
Person(); //"function has called"
這樣我們可以實(shí)現(xiàn)一個(gè)構(gòu)造函數(shù)，只能使用 new 調(diào)用：
function Person(name){
if(new.target === Person){
this.name = name;
} else {
throw new TypeError("constructor must be called by 'new'");
}
}
new Person('Bob'); //"constructor has called"
Person(); //TypeError: constructor must be called by 'new'
Person.call({}); //TypeError: constructor must be called by 'new'
這里需要注意：父類構(gòu)造函數(shù)中的 new.target 會(huì)在調(diào)用子類構(gòu)造函數(shù)時(shí)返回子類，因此使用了該屬性的類不應(yīng)該被實(shí)例化，只用于繼承，類似于 C++ 中的抽象類。
class Person{
constructor(name){
if(new.target === Person){
this.name = name;
} else {
throw new TypeError("constructor must be called by 'new'");
}
}
}
class Coder extends Person{}
new Coder('Bob'); //TypeError: constructor must be called by 'new' 這不是我們想要的
//抽象類實(shí)現(xiàn)
class Person{
constructor(name){
if(new.target === Person){
throw new TypeError("This class cannot be instantiated");
}
this.name = name;
}
}
class Coder extends Person{}
var c = new Coder('Bob');
console.log(c.name); //'Bob'
new Person('Bob'); //TypeError: This class cannot be instantiated
關(guān)于抽象類這里解釋一下，要一個(gè)類不能實(shí)例化只能繼承用什么用？
在繼承中產(chǎn)生歧義的原因有可能是繼承類繼承了基類多次，從而產(chǎn)生了多個(gè)拷貝，即不止一次的通過(guò)多個(gè)路徑繼承類在內(nèi)存中創(chuàng)建了基類成員的多份拷貝。抽象類的基本原則是在內(nèi)存中只有基類成員的一份拷貝。舉個(gè)例子，一個(gè)類叫"動(dòng)物"，另有多各類繼承自動(dòng)物，比如"胎生動(dòng)物"、"卵生動(dòng)物"，又有多個(gè)類繼承自哺乳動(dòng)物, 比如"人", "貓", "狗"，這個(gè)例子好像復(fù)雜了，不過(guò)很明顯，被實(shí)例化的一定是一個(gè)個(gè)體，比如"人", "貓", "狗"。而"胎生動(dòng)物"，不應(yīng)該被實(shí)例化為一個(gè)個(gè)體，它僅僅是人類在知識(shí)領(lǐng)域，為了分類世間萬(wàn)物而抽象的一個(gè)分類。但是面向?qū)ο笤O(shè)計(jì)要求我們把共性放在一起以減少代碼，因此就有了抽象類。所以胎生動(dòng)物都會(huì)運(yùn)動(dòng)，都可以發(fā)出聲音，這些就應(yīng)該是共性放在"胎生動(dòng)物"類中，而所以動(dòng)物都會(huì)呼吸，會(huì)新陳代謝，這些共性就放在動(dòng)物里面，這樣我們就不需要在"人", "貓", "狗"這樣的具體類中一遍遍的實(shí)現(xiàn)這些共有的方法和屬性。
