es6 --class继承

版权声明：版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载 https://blog.csdn.net/qq_37674616/article/details/83050414

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(); //报错