javascript继承方式对比

2019年5月22日 146次阅读 来源: MarxJiao

原文地址：https://marxjiao.com/2018/03/16/js-extends/

本文对比三种常用的js继承方式。组合式继承、原型式继承和ES6中class的extends。对比方式简单粗暴，写出这几种继承，之后看继承后的类的实例。

代码

// 基类
function Parent() {
    this.a = 1;
}
Parent.prototype.getA = function () {
    console.log(this.a);
    return this.a;
}

// 组合式继承
function Child1() {
    this.b = 2;
    // 先借用构造函数
    Parent.call(this);
}
Child1.prototype = new Parent();
Child1.prototype.constructor = Child1;

// 原型式继承
function Child2() {
    this.c = 3;
    // 先借用构造函数
    Parent.call(this);
}
Child2.prototype = Object.create(Parent.prototype);
Child2.prototype.constructor = Child2;

// es6继承
class Child3 extends Parent {
    constructor () {
        super(Parent)
        this.d = 4;
    }
}

console.log(new Child1());
console.log(new Child2());
console.log(new Child3());

运行结果：

《javascript继承方式对比》 image.png

总结

可以看到组合式继承和原型式继承最主要的区别是组合式继承的子类原型上有父类构造函数中的属性。原型式继承和es6的extends继承方式基本没什么差别，只是constructor类型一个是函数，一个是class。

    原文作者：MarxJiao
    原文地址: https://www.jianshu.com/p/2b27a3c51877
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞