ES6入門 Class 的繼承

es6 提供了更接近傳統語言的寫法，引入了 class（類）這個概念，作為物件的模板。通過class關鍵字，可以定義類。

基本上，es6 的class可以看作只是乙個語法糖，它的絕大部分功能，es5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的語法而已。

//傳統物件導向寫法
function person(name,age)
person.prototype.showname = function();
person.prototype.showage = function();
var p1 = new person('allen',28);
var p2 = new person('nana',24);
console.log(p1.showname()); // allen
console.log(p2.showage()); // 24
console.log(p1.showname === p2.showname); // true
console.log(p1.constructor == person); // true
//es6物件導向寫法
class person
showname()
showage()
}var p1 = new person('aaa',18);
var p2 = new person('bbb',20);
console.log(p1.name); // aaa
console.log(p1.showname()); // aaa
console.log(p2.showage()); // 20
console.log(p1.showage == p2.showage); // true
console.log(p1.constructor == person); // true

物件導向class給預設值

class person
showname()
showage()
}var p1 = new person();
console.log(p1.name); // 構造器裡面給的預設值 default
console.log(p1.age); // 構造器裡面給的預設值 0

繼承傳統寫法原型繼承

// 定義乙個動物類
function animal (name) 
}// 原型方法
animal.prototype.eat = function(food) ;
//通過呼叫父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類例項作為子類原型，實現函式復用
function cat(name)
cat.prototype = new animal();
// 組合繼承也是需要修復建構函式指向的。
= cat;
// test code
var cat = new cat("dog");
cat.sleep()
cat.eat("骨頭");
console.log(cat instanceof animal); // true
console.log(cat instanceof cat); // true

es6中物件導向實現類繼承

class animal
eat(food)
}class cat extends animal
showcolor()
}var cat=new cat("cat","white");
cat.eat("魚")
console.log(cat.showcolor());

class可以通過extends關鍵字實現繼承，這比es5通過修改原型鏈實現繼承要清晰和方便很多。

class point
class colorpoint extends point

上面的**定義了乙個colorpoint類，該類通過extends關鍵字，繼承了point類的所有屬性和方法。

class point
tostring()
}class colorpoint extends point
tostring()
}

子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。這是因為子類自己的this物件，必須先通過父類的建構函式完成塑造，得到與父類同樣的例項屬性和方法，然後再對其進行加工，加上子類自己的例項屬性和方法。如果不呼叫super方法，子類就得不到this物件。

所以生成子類例項的**：

let cp=new colorpoint(10,24,'green');
cp instanceof colorpoint // true
cp instanceof point // true

父類的靜態方法也會被子類繼承

class a
}class b extends a
b.hello() // hello world

super 關鍵字super這個關鍵字，既可以當作函式使用，也可以當作物件使用。在這兩種情況下，它的用法完全不同。

第一種情況，super作為函式呼叫時，代表父類的建構函式。es6 要求，子類的建構函式必須執行一次super函式。

class a {}
class b extends a 
}

注意，super雖然代表了父類a的建構函式，但是返回的是子類b的例項，即super內部的this指的是b，因此super()在這裡相當於a.prototype.constructor.call(this)。

class a 
}class b extends a 
}new a() // a
new b() // b

第二種情況，super作為物件時，在普通方法中，指向父類的原型物件；在靜態方法中，指向父類。

class a 
}class b extends a 
}let b = new b();

上面**中，子類b當中的super.p()，就是將super當作乙個物件使用。這時，super在普通方法之中，指向a.prototype，所以super.p()就相當於a.prototype.p()。

這裡需要注意，由於super指向父類的原型物件，所以定義在父類例項上的方法或屬性，是無法通過super呼叫的。

ES6入門 Class 的繼承

ES6的class和繼承

ES6之 Class 的繼承（十二）

JS 學習ES6之 class 的繼承

ES6入門 Class 的繼承

ES6的class和繼承

ES6之 Class 的繼承（十二）

JS 學習ES6之 class 的繼承

相關推薦