es6 --class繼承
阿新 • • 發佈:2018-11-12
es5與es6繼承對比
1.es5中繼承的實質是先創造子類的例項物件this,然後再將父類的方法新增到this上(parent.apply(this)).
function SuperType(){
this.colors=["red","blue"];
}
function SubType(){
//借用建構函式
SuperType.call(this);
}
2.es6中繼承則是先建立父類的例項物件this(所有必須先呼叫super方法
class superType{
constructor(x,y){
this.x=x;
this.y=y;
}
toString(){
return this.x+' '+this.y;
}
}
class subType extends superType{
constructor(x,y,z){
this.c=c; ///報錯
super(x,y);
}
}
類的prototype與__proto__屬性
每個物件都有__proto__屬性,指向對應的父建構函式(即建構函式的prototype屬性)。class同時有prototype屬性和__proto__屬性,因此同時存在兩條繼承鏈
1.子類的__proto__屬性表示建構函式的繼承,總是指向父類
2. 子類prototype屬性的__proto__屬性表示方法的繼承,總是指向父類的prototype屬性
**:__proto__是每個物件都有的屬性,用來在原型鏈上查詢所需要的方法的實際物件;prototype是函式獨有的屬性。當使用new關鍵字並且將函式作為建構函式來構造物件的時候。
class A{} class B extends A{} console.log(B.__proto__===A); //true console.log(B.prototype.__proto__===A.prototype); //true //===>等價 class A{} class B{} //B的例項A的例項 Object.setPrototypeOf(B.prototype,A.prototype); //B繼承A的靜態屬性 Object.setPrototypeOf(B,A);
class的靜態屬性與方法
1.靜態方法不能被例項化繼承,而是通過直接類來呼叫
2.靜態方法的this指向類,而不是呼叫者
//靜態屬性
class Foo{}
Foo.a=1;
Foo.a //1
//靜態方法
class Foo{
static classMethod(){
this.say();
}
static say(){
console.log('呼叫靜態方法');
}
say(){
console.log('呼叫非靜態方法');
}
}
Foo.classMethod(); //'呼叫靜態方法'
var f=new Foo();
f.classMethod(); //報錯