1. 程式人生 > >es6 --class繼承

es6 --class繼承

es5與es6繼承對比

1.es5中繼承的實質是先創造子類的例項物件this,然後再將父類的方法新增到this上(parent.apply(this)).

 function SuperType(){
      this.colors=["red","blue"];
}
 function SubType(){
            //借用建構函式
      SuperType.call(this);
}

2.es6中繼承則是先建立父類的例項物件this(所有必須先呼叫super方法

),然後再用子類的建構函式修改this.

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(); //報錯