javascript中class的继承的基础用法

在es6中class可通过关键词extends来实现继承,es5则是修改原型链来实现继承的。

语法部分


javascript中class的继承的基础用法


  1. 上述代码有两个类,分别是universe和earth,后者继承前者,这样earth就拥有了universe的属性和方法了。
  2. 有一个注意点:就是子类在constructor方法中调用super,super就是父类的构造函数,我们必须先构造父类,才能使用子类。
  3. 如果子类不显式声明constructor,那么子类会自动调用,但是如果你自己要显式声明,那么要记住第一件事就是调用super().
  4. 只有调用super之后,你才可以使用this和实例化,否则都会报错。


完整部分


javascript中class的继承的基础用法

  • 这里的代码跟上面的没什么区别,注意看子类中fn1这个函数,他使用了父类的sky属性,注意在子类使用父类的属性时,只能使用this来调用,使用super是找不到的,因为class中的属性都是实例属性。
  • 但是如果是函数,使用this或者super都是可以调用的到,比如在constructor方法中调用了父类的rotate方法,这里使用this.rotate()或者super.rotate()都是可以的,因为函数都是在原型上的。


es5中的继承

es5中的继承则是让某个构造函数的原型对象等于另一个类型的实例,这样实现的继承。

javascript中class的继承的基础用法

相信大家都可以看懂,es5的继承就让子类的prototype等于父类的实例,即可完成继承。

相比之下,es6的继承肯定更清晰,而且更方便,不过es6的继承也是通过原型来操作的,只是给我们封装了。


分享到:


相關文章: