JS继承方式总结

1、构造函数绑定方式

function A(){
        this.a = 1;
}

function B(){
        A.apply(this, arguments);
        this.b = 2;    
}
var b = new B();
b.a; //1

优点：简单易懂
缺点：无法继承父类A的原型里的属性和方法

2、原型模式

function A(){
         this.a = 1;
}

A.prototype.aa = 11;

function B(){
        his.b = 2;
}

B.prototype = new A();

B.prototype.constructor = B;

var b = new B();

b.a; //1

b.aa; //11

优点：子类可以继承父类A的原型里的属性和方法

缺点：创建子类实例需要多次创建父类对象，消耗内存

3、直接继承prototype

function A(){
    this.a = 1;
}
A.prototype.aa = 11;

function B(){
    this.b = 2;
}

B.prototype = A.prototype;
B.prototype.constructor = B;

var b = new B();
b.a; //1
b.aa; //11

优点：子类可以继承父类A的原型里的属性和方法,无需创建父类对象

缺点：父类A的原型对象被修改，其constructor属性指向了子类B

4、原型链继承

function A(){
    this.a = 1;
}
A.prototype.aa = 11;

function B(){
    A.apply(this, arguments);
    this.b = 2;
}

B.prototype.__proto__ = A.prototype;
//或者
//Object.setPrototypeOf(B.prototype, A.prototype);

var b = new B();
b.a; //1
b.aa; //11

优点：具有上述其他方式的优点

缺点：需要高版本的浏览器支持

最后编辑于：2018.08.07 13:41:03

JS继承方式总结

推荐阅读更多精彩内容