本文将从最简单的例子开始，从零讲解在 JavaScript 中如何实现继承。
小例子
现在有个需求，需要实现 Cat 继承 Animal ，构造函数如下：
<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box;
font-family: Consolas, Menlo, Courier, monospace; font-size: 16px;
white-space: pre-wrap; position: relative;
line-height: 1.5; color: rgb(153, 153, 153);
margin: 1em 0px; padding: 12px 10px;
border: 1px solid rgb(232, 232, 232); font-style: normal;
font-variant: normal; font-weight: normal;
letter-spacing: normal; orphans: auto;
text-align: start; text-indent: 0px; text-transform: none; widows: 1;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
background: rgb(244, 245, 246);">function Animal(name){
this.name = name }
function Cat(name){
this.name = name }</pre>
继承
在实现这个需求之前，我们先谈谈继承的意义。继承本质上为了提高代码的复用性。
对于 JavaScript 来说，继承有两个要点：
-
复用父构造函数中的代码
-
复用父原型中的代码
下面的内容将围绕这两个要点展开。
第一版代码
复用父构造函数中的代码，我们可以考虑调用父构造函数并将 this 绑定到子构造函数。
复用父原型中的代码，我们只需改变原型链即可。将子构造函数的原型对象的 proto 属性指向父构造函数的原型对象。
第一版代码如下：
<pre style="-webkit-tap-highlight-color: transparent;
box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace;
font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5;
color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px;
border: 1px solid rgb(232, 232, 232); font-style: normal; font-variant: normal;
font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start;
text-indent: 0px; text-transform: none; widows: 1; word-spacing: 0px;
-webkit-text-stroke-width: 0px; background: rgb(244, 245, 246);">function Animal(name){
this.name = name } function Cat(name){
Animal.call(this,name) } Cat.prototype.__proto__ = Animal.prototype</pre>
检验一下是否继承成功：我们在 Animal 的原型对象上添加 eat 函数。使用 Cat 构造函数生成一个名为 'Tom' 的实例对象 cat 。代码如下：
<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box;
font-family: Consolas, Menlo, Courier, monospace; font-size: 16px;
white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153);
margin: 1em 0px; padding: 12px 10px; border: 1px solid rgb(232, 232, 232);
font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal;
orphans: auto; text-align: start; text-indent: 0px; text-transform: none;
widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;
background: rgb(244, 245, 246);">function Animal(name){
this.name = name } function Cat(name){
Animal.call(this,name) } Cat.prototype.__proto__ = Animal.prototype
// 添加 eat 函数 Animal.prototype.eat = function(){
console.log('eat') } var cat = new Cat('Tom')
// 查看 name 属性是否成功挂载到 cat 对象上 console.log(cat.name)
// Tom // 查看是否能访问到 eat 函数 cat.eat() // eat
// 查看 Animal.prototype 是否位于原型链上 console.log(cat instanceof Animal) // true
// 查看 Cat.prototype 是否位于原型链上 console.log(cat instanceof Cat) //true</pre>
经检验，成功复用父构造函数中的代码，并复用父原型对象中的代码，原型链正常。
图示
手把手教你如何实现继承
弊端
proto 属性虽然可以很方便地改变原型链，但是 proto 直到 ES6 才添加到规范中，存在兼容性问题，并且直接使用 proto 来改变原型链非常消耗性能。所以 proto 属性来实现继承并不可取。
第二版代码
针对 proto 属性的弊端，我们考虑使用 new 操作符来替代直接使用 proto 属性来改变原型链。
我们知道实例对象中的 proto 属性指向构造函数的 prototype 属性的。这样我们 Animal 的实例对象赋值给 Cat.prototype 。不就也实现了Cat.prototype.proto = Animal.prototype 语句的功能了吗？
代码如下：
<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box;
font-family: Consolas, Menlo, Courier, monospace; font-size: 16px;
white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153);
margin: 1em 0px; padding: 12px 10px; border: 1px solid rgb(232, 232, 232);
font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal;
orphans: auto; text-align: start; text-indent: 0px; text-transform: none;
widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;
background: rgb(244, 245, 246);">function Animal(name){
this.name = name } function Cat(name){
Animal.call(this,name) } Cat.prototype = new Animal() Cat.prototype.constructor = Cat</pre>
使用这套方案有个问题，就是在将实例对象赋值给 Cat.prototype 的时候，将 Cat.prototype 原有的 constructor 属性覆盖了。实例对象的 constructor 属性向上查询得到的是构造函数 Animal 。所以我们需要矫正一下 Cat.prototype 的 constructor 属性，将其设置为构造函数 Cat 。
图示
手把手教你如何实现继承
优点
兼容性比较好，并且实现较为简单。
弊端
使用 new 操作符带来的弊端是，执行 new 操作符的时候，会执行一次构造函数将构造函数中的属性绑定到这个实例对象。这样就多执行了一次构造函数，将原本属于 Animal 实例对象的属性混到 prototype 中了。
第三版代码
考虑到第二版的弊端，我们使用一个空构造函数来作为中介函数，这样就不会将构造函数中的属性混到 prototype 中，并且减少了多执行一次构造函数带来的性能损耗。
代码如下：
<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box;
font-family: Consolas, Menlo, Courier, monospace; font-size: 16px;
white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153);
margin: 1em 0px; padding: 12px 10px; border: 1px solid rgb(232, 232, 232);
font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal;
orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: 1;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
background: rgb(244, 245, 246);">function Animal(name){
this.name = name } function Cat(name){
Animal.call(this,name) } function Func(){}
Func.prototype = Animal.prototype Cat.prototype = new Func() Cat.prototype.constructor = Cat</pre>
图示
手把手教你如何实现继承
ES6
使用 ES6 就方便多了。可以使用 extends 关键字实现继承， 复用父原型中的代码。使用 super 关键字来复用父构造函数中的代码。
代码如下：
class Animal { constructor(name){
this.name = name } eat(){
console.log('eat') } } class Cat extends Animal{
constructor(name){ super(name)
} } let cat = new Cat('Tom') console.log(cat.name) // Tom cat.eat() // eat
“我自己是一名从事了6年前端的老程序员，今年年初我花了一个月整理了一份最适合2019年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，web前端学习交流，“550389714”这里是小白聚集地，欢迎初学和进阶中的小伙伴。"
网友评论