ES6提供了更接近傳統(tǒng)語言的寫法何缓,引入了Class(類)這個概念福荸。新的class寫法讓對象原型的寫法更加清晰蕴坪、更像面向對象編程的語法,也更加通俗易懂敬锐。
class Animal {
// 構造方法背传,實例化的時候將會被調用,如果不指定滞造,那么會有一個不帶參數(shù)的默認構造函數(shù).
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型對象上的屬性
toString() {
console.log('name:' + this.name + ',color:' + this.color);
}
}
var animal = new Animal('dog','white');
animal.toString();
console.log(animal.hasOwnProperty('name')); //true
console.log(animal.hasOwnProperty('toString')); // false
console.log(animal.__proto__.hasOwnProperty('toString')); // true
class Cat extends Animal {
constructor(action) {
// 子類必須要在constructor中指定super 方法续室,否則在新建實例的時候會報錯.
// 如果沒有置頂consructor,默認帶super方法的constructor將會被添加、
super('cat','white');
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat('catch')
cat.toString();
// 實例cat 是 Cat 和 Animal 的實例谒养,和Es5完全一致挺狰。
console.log(cat instanceof Cat); // true
console.log(cat instanceof Animal); // true
上面代碼首先用class定義了一個“類”,可以看到里面有一個constructor方法买窟,這就是構造方法丰泊,而this關鍵字則代表實例對象。簡單地說始绍,constructor內定義的方法和屬性是實例對象自己的瞳购,而constructor外定義的方法和屬性則是所有實例對象可以共享的。
Class之間可以通過extends關鍵字實現(xiàn)繼承亏推,這比ES5的通過修改原型鏈實現(xiàn)繼承学赛,要清晰和方便很多。上面定義了一個Cat類吞杭,該類通過extends關鍵字盏浇,繼承了Animal類的所有屬性和方法。
super關鍵字芽狗,它指代父類的實例(即父類的this對象)绢掰。子類必須在constructor方法中調用super方法,否則新建實例時會報錯。這是因為子類沒有自己的this對象滴劲,而是繼承父類的this對象攻晒,然后對其進行加工。如果不調用super方法班挖,子類就得不到this對象鲁捏。
ES6的繼承機制,實質是先創(chuàng)造父類的實例對象this(所以必須先調用super方法)萧芙,然后再用子類的構造函數(shù)修改this碴萧。