vue 对象继承_前端中的面向对象编程（三篇）：深入继承问题

上一篇文章中我们简单用ES实现了前端中的几种继承方式，以及各种继承方式的优缺点。在ES中继承的基本原理为原型的实现，最终我们发现寄生组合式继承是当下较为完善的继承方式。如果你读过关于vue/react/angular等这些框架的相关源码，你会发现他们的核心代码基本都是通过prototype来实现的

在ES6之后， class的出现提供的extends继承的相关语法糖，我们来看一下关于ES6中关于extends通过babel编译为ES5后的相关实现

ES6：

编译后：

由上图我们来看看babel编译后的extends 语法糖，在创建了两个类(具体class 语法糖编译参考)后，实现继承核心为_inherits函数，我们看一下关于_inherits函数具体的实现：

以上为inherits 函数，有些朋友可能觉得有点难懂，下面我们换一种方式实现_inherits函数：

现在这样应该就比较容易看懂了，是不是和我们上文的寄生组合继承一模一样。因此我们可以看出。inherits函数其实就是基于寄生组合继承实现，其核心就为以下两段代码：

subClass.prototype._proto_ = superClass.prototype; // 内部属性、原型属性

subClass._proto_ = superClass; // 静态属性

这样子类就能正常访问到父类的内部属性、原型属性、静态属性了。为了方便认知我们在浏览器上简单看一下继承的相关结构，方便理解：

因此我们可以看出ES6中的extends语法糖是是基于寄生组合式继承实现的，也是当下前端中最优的继承方式。

此外如果有兴趣的朋友可以关注一下vue、react、angular前端框架中关于继承的问题如： this 丢失，子属性污染等问题。后文框架篇再介绍。