JS实现继承的几种方式

悠悠 2021-12-07 12:11 333阅读 0赞

[点击去原文][Link 1]

前言

JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。

## JS继承的实现方式 ##

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类
    function Animal (name) {
      // 属性
      this.name = name || 'Animal';
      // 实例方法
      this.sleep = function(){
        console.log(this.name + '正在睡觉！');
      }
    }
    // 原型方法
    Animal.prototype.eat = function(food) {
      console.log(this.name + '正在吃：' + food);
    };

### 1、原型链继承 ###

**核心：** 将父类的实例作为子类的原型

function Cat(){ 
    }
    Cat.prototype = new Animal();
    Cat.prototype.name = 'cat';

//　Test Code  
var cat = new Cat();  
console.log([cat.name][]);  
console.log(cat.eat(‘fish’));  
console.log(cat.sleep());  
console.log(cat instanceof Animal); //true  
console.log(cat instanceof Cat); //true

特点：

1.  非常纯粹的继承关系，实例是子类的实例，也是父类的实例
2.  父类新增原型方法/原型属性，子类都能访问到
3.  简单，易于实现

缺点：

1.  要想为子类新增属性和方法，必须要在`new Animal()`这样的语句之后执行，不能放到构造器中
2.  无法实现多继承
3.  来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）（详细请看附录代码： 示例1）
4.  创建子类实例时，无法向父类构造函数传参

推荐指数：★★（3、4两大致命缺陷）

**2017-8-17 10:21:43补充：感谢 [MMHS][] 指出。缺点1中描述有误：可以在Cat构造函数中，为Cat实例增加实例属性。如果要新增原型属性和方法，则必须放在`new Animal()`这样的语句之后执行。**

**2018-9-10 00:03:45补充：感谢 [IRVING\_J][IRVING_J] 指出。缺点3中的描述不够充分。更正为：来自原型对象的所有属性被所有实例共享。**

### 2、构造继承 ###

**核心：**使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }

// Test Code  
var cat = new Cat();  
console.log([cat.name][]);  
console.log(cat.sleep());  
console.log(cat instanceof Animal); // false  
console.log(cat instanceof Cat); // true

特点：

1.  解决了1中，子类实例共享父类引用属性的问题
2.  创建子类实例时，可以向父类传递参数
3.  可以实现多继承（call多个父类对象）

缺点：

1.  实例并不是父类的实例，只是子类的实例
2.  只能继承父类的实例属性和方法，不能继承原型属性/方法
3.  无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

推荐指数：★★（缺点3）

### 3、实例继承 ###

**核心：**为父类实例添加新特性，作为子类实例返回

function Cat(name){
      var instance = new Animal();
      instance.name = name || 'Tom';
      return instance;
    }

// Test Code  
var cat = new Cat();  
console.log([cat.name][]);  
console.log(cat.sleep());  
console.log(cat instanceof Animal); // true  
console.log(cat instanceof Cat); // false

特点：

1.  不限制调用方式，不管是`new 子类()`还是`子类()`,返回的对象具有相同的效果

缺点：

1.  实例是父类的实例，不是子类的实例
2.  不支持多继承

推荐指数：★★

### 4、拷贝继承 ###

function Cat(name){
      var animal = new Animal();
      for(var p in animal){
        Cat.prototype[p] = animal[p];
      }
      Cat.prototype.name = name || 'Tom';
    }

// Test Code  
var cat = new Cat();  
console.log([cat.name][]);  
console.log(cat.sleep());  
console.log(cat instanceof Animal); // false  
console.log(cat instanceof Cat); // true

特点：

1.  支持多继承

缺点：

1.  效率较低，内存占用高（因为要拷贝父类的属性）
2.  无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

推荐指数：★（缺点1）

### 5、组合继承 ###

**核心：**通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }
    Cat.prototype = new Animal();
    
    // 感谢 @学无止境c 的提醒，组合继承也是需要修复构造函数指向的。
    
    Cat.prototype.constructor = Cat;
    
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true

特点：

1.  弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
2.  既是子类的实例，也是父类的实例
3.  不存在引用属性共享问题
4.  可传参
5.  函数可复用

缺点：

1.  调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

推荐指数：★★★★（仅仅多消耗了一点内存）

### 6、寄生组合继承 ###

**核心：**通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

// Test Code  
var cat = new Cat();  
console.log([cat.name][]);  
console.log(cat.sleep());  
console.log(cat instanceof Animal); // true  
console.log(cat instanceof Cat); //true  
  
**感谢 @[bluedrink][] 提醒，该实现没有修复constructor。**  
  
Cat.prototype.constructor = Cat; // 需要修复下构造函数

特点：

1.  堪称完美

缺点：

1.  实现较为复杂

推荐指数：★★★★（实现复杂，扣掉一颗星）

## 附录代码： ##

示例一：

var tom = new Cat(‘Tom’);  
var kissy = new Cat(‘Kissy’);

console.log([tom.name][]); // “Animal”  
console.log([kissy.name][]); // “Animal”  
console.log(tom.features); // \[\]  
console.log(kissy.features); // \[\]

[tom.name][] = ‘Tom-New Name’;  
tom.features.push(‘eat’);

//针对父类实例值类型成员的更改，不影响  
console.log([tom.name][]); // “Tom-New Name”  
console.log([kissy.name][]); // “Animal”  
//针对父类实例引用类型成员的更改，会通过影响其他子类实例  
console.log(tom.features); // \[‘eat’\]  
console.log(kissy.features); // \[‘eat’\]

原因分析：

关键点：属性查找过程

执行tom.features.push，首先找tom对象的实例属性（找不到），  
那么去原型对象中找，也就是Animal的实例。发现有，那么就直接在这个对象的  
features属性中插入值。  
在console.log(kissy.features); 的时候。同上，kissy实例上没有，那么去原型上找。  
刚好原型上有，就直接返回，但是注意，这个原型对象中features属性值已经变化了。

/\* RESET  
=============================================================================\*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video \{  
margin: 0;  
padding: 0;  
border: 0;  
\}

/\* BODY  
=============================================================================\*/

body \{  
font-family: Helvetica, arial, freesans, clean, sans-serif;  
font-size: 14px;  
line-height: 1.6;  
color: \#333;  
background-color: \#fff;  
padding: 20px;  
margin: 0 auto;  
\}

body>\*:first-child \{  
margin-top: 0 !important;  
\}

body>\*:last-child \{  
margin-bottom: 0 !important;  
\}

/\* BLOCKS  
=============================================================================\*/

p, blockquote, ul, ol, dl, table, pre \{  
margin: 15px 0;  
\}

/\* HEADERS  
=============================================================================\*/

h1, h2, h3, h4, h5, h6 \{  
margin: 20px 0 10px;  
padding: 0;  
font-weight: bold;  
\-webkit-font-smoothing: antialiased;  
\}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code \{  
font-size: inherit;  
\}

h1 \{  
font-size: 28px;  
color: \#000;  
\}

h2 \{  
font-size: 24px;  
border-bottom: 1px solid \#ccc;  
color: \#000;  
\}

h3 \{  
font-size: 18px;  
\}

h4 \{  
font-size: 16px;  
\}

h5 \{  
font-size: 14px;  
\}

h6 \{  
color: \#777;  
font-size: 14px;  
\}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child \{  
margin-top: 0;  
padding-top: 0;  
\}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 \{  
margin-top: 0;  
padding-top: 0;  
\}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p \{  
margin-top: 10px;  
\}

/\* LINKS  
=============================================================================\*/

a \{  
color: \#4183C4;  
text-decoration: none;  
\}

a:hover \{  
text-decoration: underline;  
\}

/\* LISTS  
=============================================================================\*/

ul, ol \{  
padding-left: 30px;  
\}

ul li > :first-child,  
ol li > :first-child,  
ul li ul:first-of-type,  
ol li ol:first-of-type,  
ul li ol:first-of-type,  
ol li ul:first-of-type \{  
margin-top: 0px;  
\}

ul ul, ul ol, ol ol, ol ul \{  
margin-bottom: 0;  
\}

dl \{  
padding: 0;  
\}

dl dt \{  
font-size: 14px;  
font-weight: bold;  
font-style: italic;  
padding: 0;  
margin: 15px 0 5px;  
\}

dl dt:first-child \{  
padding: 0;  
\}

dl dt>:first-child \{  
margin-top: 0px;  
\}

dl dt>:last-child \{  
margin-bottom: 0px;  
\}

dl dd \{  
margin: 0 0 15px;  
padding: 0 15px;  
\}

dl dd>:first-child \{  
margin-top: 0px;  
\}

dl dd>:last-child \{  
margin-bottom: 0px;  
\}

/\* CODE  
=============================================================================\*/

pre, code, tt \{  
font-size: 12px;  
font-family: Consolas, “Liberation Mono”, Courier, monospace;  
\}

code, tt \{  
margin: 0 0px;  
padding: 0px 0px;  
white-space: nowrap;  
border: 1px solid \#eaeaea;  
background-color: \#f8f8f8;  
border-radius: 3px;  
\}

pre>code \{  
margin: 0;  
padding: 0;  
white-space: pre;  
border: none;  
background: transparent;  
\}

pre \{  
background-color: \#f8f8f8;  
border: 1px solid \#ccc;  
font-size: 13px;  
line-height: 19px;  
overflow: auto;  
padding: 6px 10px;  
border-radius: 3px;  
\}

pre code, pre tt \{  
background-color: transparent;  
border: none;  
\}

kbd \{  
\-moz-border-bottom-colors: none;  
\-moz-border-left-colors: none;  
\-moz-border-right-colors: none;  
\-moz-border-top-colors: none;  
background-color: \#DDDDDD;  
background-image: linear-gradient(\#F1F1F1, \#DDDDDD);  
background-repeat: repeat-x;  
border-color: \#DDDDDD \#CCCCCC \#CCCCCC \#DDDDDD;  
border-image: none;  
border-radius: 2px 2px 2px 2px;  
border-style: solid;  
border-width: 1px;  
font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;  
line-height: 10px;  
padding: 1px 4px;  
\}

/\* QUOTES  
=============================================================================\*/

blockquote \{  
border-left: 4px solid \#DDD;  
padding: 0 15px;  
color: \#777;  
\}

blockquote>:first-child \{  
margin-top: 0px;  
\}

blockquote>:last-child \{  
margin-bottom: 0px;  
\}

/\* HORIZONTAL RULES  
=============================================================================\*/

hr \{  
clear: both;  
margin: 15px 0;  
height: 0px;  
overflow: hidden;  
border: none;  
background: transparent;  
border-bottom: 4px solid \#ddd;  
padding: 0;  
\}

/\* IMAGES  
=============================================================================\*/

img \{  
max-width: 100%  
\}  
–>

[Link 1]: https://www.cnblogs.com/humin/p/4556820.html?tdsourcetag=s_pcqq_aiomsg
[cat.name]: http://cat.name
[MMHS]: http://home.cnblogs.com/u/1066372/
[IRVING_J]: https://www.cnblogs.com/lianghaijie-ctw/
[bluedrink]: http://home.cnblogs.com/u/1291442/
[tom.name]: http://tom.name
[kissy.name]: http://kissy.name