js继承的实现(es6/es5)

本文主要是介绍js继承的实现(es6/es5)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在我们知道继承之前我们要先知道什么是原型，(如果有不知道的可以去看我上篇博客)

在Es6之前，我们实现继承其实还是比较麻烦的(在这里Es6之前我们称为Es5)。

Es5实现继承:

1.构造函数继承:

 在上面这段代码中我们就已经实现的构造函数继承。构造函数继承原理是我们利用call方法修改要被继承的构造函数的this指向(当然也可以是用bind进行修改this指向)，从而实现继承。我们看一下打印结果:

 这里我们可以看到我们成功的继承了函数内的属性但是原型上的方法并没有继承

这里我们可以总结一下：

优点：构造函数继承可以完美继承函数上的属性和方法(并进行传参)

缺点：但不能继承原型上的属性和方法(所以不推荐使用)

2.原型继承:

我们先来看一下实现代码:

 从上面代码我们可以看到我们是把被继承的构造函数的实例给了要继承的构造函数的原型

我们一起看一下打印结果:

 从上面这张图我们可以看到无论是函数内的属性或方法还是原型上的属性方法我们都成功继承了

我们总结一下:

优点：原型继承可以完美的继承所以属性和方法

缺点：不能给对象上的属性进行传参(不能传参也就相当于没继承，因为继承一个空属性有什么用。不推荐使用)

3.组合继承：

 组合继承我们同时用到了原型继承和过构造函数继承(利用两种继承的优点互相弥补缺点)

原型继承的时候我们就可以直接继承被继承构造函数的原型，不需要继承实例

最后把原型中的constructor的指向修改成构造函数本身

看打印结果

 从打印结果我们可以看出不但完美继承了属性和方法也可以进行传参

我们总结一下:

优点：组合继承可以完美的继承所以属性和方法并进行传参(推荐使用)

看到这里我相信如果基础不好的可能已经蒙蒙的了，不要紧为了解决继承时的繁琐步骤在Es6中我们是用class类来完成。如果拿Es6的继承跟Es5想比Es6简单的就跟个1一样

说完Es5的继承我们在看一下Es6的继承:

在Es6新增了一个class类来进行继承

在class中使用extends进行继承，使用super进行传参

我们来看一下结果: 

 从打印结果我们可以看出已经完美继承了

看到这了是不是感觉Es6比Es5简单的不是一星半点，Es6继承简单的跟一似的

到这里我们的继承就讲完了，如有疑问请留言

这篇关于js继承的实现(es6/es5)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！