Javascript 五十问——实现的继承多种方式

BlackHole1 发布于2019-08-23 14:37 / 1332人阅读

摘要：组合继承实现了属性分离，方法共享下的完美继承方案继承我们的主角，，就是对组合继承的改进。这也是为什么在子类构造函数中一定要显示调用的原因。

谈到继承，或者更广义上的：一个对象可以使用另外一个对象的属性或方法。实现起来无外乎有两种方式：
apply or call 改变this的作用域
原型继承改变__proto__指向，添加作用域链

而JavaScript所有的继承实现，都是围绕以上两点展开的。
1.原型链继承
2.构造函数继承
3.组合继承
4.ES6 extends 继承

原型链继承

function Father(){}
function Son(){}
Son.prototype = new Father()

缺点很明显：
子类构造函数不能传递参数
子类只是拷贝父类的引用，父类的引用类型的属性会被所有的子类共享

构造函数继承

function Father(){}
function Son(){
    Father.apply(this, arguments)
}

解决了参数和引用共享问题，但是父类方法不能够共享。

组合继承

function Father(){}

function Son(){
    Father.apply(this, arguments)
}

Son.prototype = new Father()

实现了属性分离，方法共享；es5下的完美继承方案

ES6继承

我们的主角，ES6 extends，就是对组合继承的改进。不同的是在子类中，子类作用域和父类作用域谁先谁后的问题。

在ES5中，首先声明子类的作用域，然后在将子类的作用域指向父类

在ES6中，是首先将子类的作用域指向父类，然后在此基础上增强子类的作用域。这也是为什么在子类构造函数中一定要显示调用super（）的原因。
参考babel转换后的代码：

var Son = function (_Father) {
  _inherits(Son, _Person);

  function Son() {
    _classCallCheck(this, Son);
    //为了方便阅读，简略了代码
    var _this = _possibleConstructorReturn(this,Father.call(this));

    _this.gender = "male";
    
    return _this;//返回的是 指向父类的作用域 _this
  }
  return Son;
}(Father);

关于更详细的ES6 Class的实现机制，可以参考我的另外一篇文章：聊一聊ES6 CLASS 实现原理<>

后记

第一次在sifou上发布文章，添加了一个专题——Javascript五十问——里面会细致聊一些关于JavaScript原生和ES6的内容；算是我自己在开发过程中的一点积累；如果哪位发现错误，希望不吝赐教，共同进步！

参考文档

一篇文章理解JS继承 https://segmentfault.com/a/11...
Javascript 红宝书
阮一峰 ES6标准入门

混合云 idc机房托管五十问 Javascript实现继承 javascript如何实现继承 js继承的几种方式

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

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

JavaScript 五十问——从源码分析 ES6 Class 的实现机制

摘要：防止类的构造函数以普通函数的方式调用。这个函数的主要作用是通过给类添加方法，其中将静态方法添加到构造函数上，将非静态的方法添加到构造函数的原型对象上。 Class是ES6中新加入的继承机制，实际是Javascript关于原型继承机制的语法糖，本质上是对原型继承的封装。本文将会讨论：1、ES6 class的实现细2、相关Object API盘点3、Javascript中的继承实现方案盘点...

LeexMuller 2019-08-23 14:38 评论0 收藏0
JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

chadLi 2019-08-02 14:05 评论0 收藏0
JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

EscapedDog 2019-08-23 14:38 评论0 收藏0
JavaScript五十问——浅入深出，自己实现一个 ES 6 Promise

摘要：以上实现了最简单的一个测试代码当然，这不能算是一个，目前仅仅实现了根据状态调用不同的回调函数。静态函数接下来是的各种静态函数每一个都执行完毕后返回总结现在，一个完整的对象就完成了。前言说到 ES6，Promise 是绕不过的问题；如果说 ES6 的 Class 是基于 Javascript 原型继承的封装，那么 Promise 则是对 callback 回调机制的改进。这篇文章，不...

hiyayiji 2019-08-23 14:40 评论0 收藏0
JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇）

摘要：前言春节假期有幸拜读了张鑫旭大大的关于与的两篇文章见参考文献，很有收获自己在开发的过程中，很多时候都会采用布局，而与这种方式已经很少使用了这次在春假期间学习了，深感的好用与便利。相对于，它多出来一个的属性，代表拉伸默认属性。前言春节假期有幸拜读了张鑫旭大大的关于Flex与Grid的两篇文章（见参考文献），很有收获；自己在开发的过程中，很多时候都会采用Flex布局，而Float与in...

xuhong 2019-08-30 15:55 评论0 收藏0