javascript继承方式对比

原文地址: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());

运行结果:

image.png

总结

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

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 4,771评论 0 21
  • 继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承。而EC...
    lovelydong阅读 246评论 0 2
  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 2,814评论 1 2
  • 本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及...
    lazydu阅读 16,251评论 7 44
  • 等待是得不到自己想要的东西,工作如此,爱情也如此。 无论什么只有拼命的争取才有可能属于你,等到的从来都是没人要的,...
    一个人的春暖花开阅读 343评论 0 1
  • 申请配置信息:短信验证:阿里大鱼(http://www.alidayu.com/)创建应用下载nodejs的sdk...
    影子ing阅读 183评论 0 1
  • 下班去培训中心去学习茶艺,今天培训茶艺礼仪,老师讲的很认真,动作也很优美,一姿一态尽显文艺端庄,如何端茶、如何...
    世道变了阅读 130评论 0 0
  • 似乎很多时候我们据理力争的,并不是我们真正想要的,只不过是内心的感情偏移罢了。 中学时代的我们,会因为一道题的不同...
    姜郁桐阅读 5,699评论 6 22