JS之理解ES6 继承extends

starsfun 发布于2019-08-20 18:23 / 2720人阅读

摘要：理解继承在中对继承有了更友好的方式。总的来说的的实质和以前的继承方式是一致的，但是有了更好的，更清晰的表现形式。

理解ES6继承extends

1.在es6中对继承有了更友好的方式。在下面的继承中那到底在extends的时候做了什么，super()又是代表什么意思。

class People{
constructor(name, age) {
  this.name = name;
  this.age = age;}
  
say(){
  alert("hello")}
  
static see(){
  alert("how are you")}}

class lily extends People{
  constructor(){
     super()}
  goodbye(){alert("goodbye")}}

2.解析extends和super()

①在前面的文章中有提及class声明类的原理：https://segmentfault.com/a/11...

②lily是People的子类，首先lily也是一个类；extends的过程中创建了一个自执行函数，并将父类传进去，继承父类之后再返回该子类。lily.__proto__指的是当前对象所属类的原型,也就是Object.getPrototypeOf(lily).

var lily = function(_People) {
   inherits(lily, _People);  //第一步，继承父类原型
   function lily() {         //第二步，继承父类对象属性
     return _possibleConstructorReturn(this, (lily.__proto__ || Object.getPrototypeOf(lily)).call(this));}
   createClass(lily, [{     //第三步，创建子类自己的方法
    key: "goodbye",
    value: function goodbye() {
    alert("goodbye");}}]);
   
   return lily;
 }(People);

③继承的过程：一般继承分两步，call继承+原型的继承（分别继承父类对象属行和原型属性）

第一步：继承父类的原型，通过Object.create，第一个参数是创建一个对象的原型，定义原型上的属性constructor指向subclass；把父类的原型方法继承给子类原型；

function inherits(subClass, superClass) {
   subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
       value: subClass,
       enumerable: false,
       writable: true,
       configurable: true
     }
   });
   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
 }

第二步：call继承，就是super()的处理过程，super()的实质就是People.call(this);把父类的对象方法继承给子类对象；这也是为什么在es6的继承时必须要加上super()，因为不加的话无法继承到父类的对象属性。

function _possibleConstructorReturn(self, call) { 
   //call指的是Object.getPrototypeOf(lily)).call(this)，也就是People.call(this)
   return call && (typeof call === "object" || typeof call === "function") ? call : self;

第三部：创建子类自己的方法。可以参考class里面的实现过程。

总的来说es6的extends的实质和以前的继承方式是一致的，但是有了更好的，更清晰的表现形式。

GPU云服务器云服务器继承java父类子类extends 深入理解webrtc之aec es6 js js 继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84436.html

揭秘babel的魔法之class继承的处理2

摘要：并且用验证了中一系列的实质就是魔法糖的本质。抽丝剥茧我们首先看的编译结果这是一个自执行函数，它接受一个参数就是他要继承的父类，返回一个构造函数。如果你已经看过第一篇揭秘babel的魔法之class魔法处理，这篇将会是一个延伸；如果你还没看过，并且也不想现在就去读一下，单独看这篇也没有关系，并不存在理解上的障碍。上一篇针对Babel对ES6里面基础class的编译进行了分析。这一篇将...

BlackHole1 2019-08-20 13:47 评论0 收藏0
javascript之模拟类继承

摘要：欢迎关注我的博客正文让我来构造函数其实，模拟一个类的方式非常的简单构造函数。我们先来看一个例子这里通过构造函数模拟出来的类，其实和其他语言的类行为上是基本一致的，唯一的区别就是它不具备私有方法。前言 ES6时代的来临，使得类继承变得如此的圆滑。但是，你有思考过ES6的类继承模式吗？如何去实现它呢？类继承对于JavaScript来说，实现方式与Java等类语言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 评论0 收藏0
JS之理解继承

摘要：父类子类原理就是改变中的指向，指向的实例，子类会获得父类的私有属性和方法原型链继承在中通过继承到了父类的私有属性和私有方法。子类私有继承父类私有原理目前比较常用的是混合继承和混合继承，子类能很清晰的继承父类的公有和私有。前言：JS之理解原型和原型链，几种常见的继承方式介绍 1.call继承，也叫借用构造函数、伪造对象或是经典继承。call继承回把父类的私有属性和方法继承给子类私有；...

caiyongji 2019-08-20 18:29 评论0 收藏0
ES6 class继承与super关键词深入探索

摘要：请看对应版本干了什么可知，相当于以前在构造函数里的行为。这种写法会与上文中写法有何区别我们在环境下运行一下，看看这两种构造函数的有何区别打印结果打印结果结合上文中关于原型的论述，仔细品味这两者的差别，最好手动尝试一下。 ES6 class 在ES6版本之前，JavaScript语言并没有传统面向对象语言的class写法，ES6发布之后，Babel迅速跟进，广大开发者也很快喜欢上ES6带...

jubincn 2019-08-26 10:58 评论0 收藏0