ES5和ES6继承

  • ES5的继承是通过原型链prototype 或者 构造函数机制来实现的。是指是创建子类的实例对象,然后再将父类的方法添加到this上(使用ParentType.apply(this))
  • ES6继承机制实质是先创建父类的实例对象this(所以必须先调用父类的 super 方法),然后再用子类的构造函数修改this

ES5继承

es的继承实现方式有好多种:(上篇文章说过啦:https://www.jianshu.com/p/c053e810b588

  1. 原型链继承
  2. 构造函数继承
  3. 组合继承
  4. 原型式继承
  5. 寄生继承
  6. 寄生组合式继承

ES6继承

使用class关键字直接定义类,加大括号,构造函数使用 constructor ,继承使用 extends 关键字。
一个简单的例子

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}
  • 注意
  1. 子类必须在constructor方法中调用super方法,否则新建实例时会报错。
    因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象

  • super关键字
  1. 当函数使用是: super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于 A.prototype.constructor.call(this,prop); super()只能用在子类的构造函数之中,用在其他地方就会报错。
  2. 当对象使用: 在普通方法中,指向父类的原型对象;在静态方法中,指向父类。 所以在子类的方法中super.print();指向的是父类原型上的方法。
    但是因为super的两种用法,所以es6规定在使用必须要明确使用方式,像单独console.log(super) 就会报错。

  • constructor
  1. constructor 方法是类的构造函数,是一个默认方法,通过 new 命令创建对象实例时,自动调用该方法。一个类必须有 constructor 方法,如果没有显式定义,一个默认的 consructor 方法会被默认添加。所以即使你没有添加构造函数,也是会有一个默认的构造函数的。一般 constructor 方法返回实例对象 this ,但是也可以指定 constructor 方法返回一个全新的对象,让返回的实例对象不是该类的实例。

  • static关键字
    顾名思义是静态方法的意思,类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承。 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为“ 静态方法”。静态方法调用直接在类上进行,而在类的实例上不可被调用。静态方法通常用于创建 实用/工具 函数。


    es6继承原理初窥
    prototype 和__ proto __ : 一个继承语句同时存在两条继承链:一条实现属性继承,一条实现方法的继承
class A {
}

class B extends A {
}

B.__proto__ === A    // true  继承属性
B.prototype.__proto__ === A.prototype   //true  继承方法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。