JS原型、原型链、构造函数、实例与继承

旧城等待， 2021-12-23 16:45 331阅读 0赞

[https://cloud.tencent.com/developer/article/1408283][https_cloud.tencent.com_developer_article_1408283]

[https://cloud.tencent.com/developer/article/1195938][https_cloud.tencent.com_developer_article_1195938]

[https://cloud.tencent.com/developer/article/1359936][https_cloud.tencent.com_developer_article_1359936]

[https://cloud.tencent.com/developer/article/1079079][https_cloud.tencent.com_developer_article_1079079]

[https://cloud.tencent.com/developer/article/1408335][https_cloud.tencent.com_developer_article_1408335]

*  图解原型和原型链
    
     *  Constructor 构造函数
     *  prototype 原型
     *  instance 实例
     *  proto 隐式原型
     *  constructor 构造函数
     *  实例、构造函数、原型之间的关系
     *  原型链

# **图解原型和原型链** #

原型和原型链是 JS 中不可避免需要碰到的知识点?，本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系?

## **Constructor 构造函数** ##

首先我们先写一个`构造函数` Person，构造函数一般为了区别普通函数要求首字母大写:

1function Person(){ }

## **prototype 原型** ##

原型指的就是一个对象，实例“继承”那个对象的属性。在原型上定义的属性，通过“继承”，实例也拥有了这个属性。“继承”这个行为是在 new 操作符内部实现的。

先不说实例，原型与构造函数的关系就是，构造函数内部有一个名为 prototype 的属性，通过这个属性就能访问到原型：

![1620][]

20190314132908.png

Person 就是构造函数，Person.prototype 就是原型

![1620 1][]

20190314132934.png

## **instance 实例** ##

有个构造函数，我们就可以在原型上创建可以“继承”的属性，并通过 new 操作符创建实例

![1620 2][]

20190314141908.png

比方说 Person，我们要创建一个 person 实例，那么使用 new 操作符就可以实现，并通过 instanceof 来检查他们之间的关系：

![1620 3][]

20190314132309.png

我们在原型上定义一个属性，那么实例上也就可以“继承”这个属性：

![1620 4][]

20190314133215.png

## **proto 隐式原型** ##

实例通过 `__proto__` 访问到原型，所以如果是实例，那么就可以通过这个属性直接访问到原型：

![1620 5][]

20190314141947.png

所以这两者是等价的：

![1620 6][]

20190314142041.png

## **constructor 构造函数** ##

既然构造函数通过 prototype 来访问到原型，那么原型也应该能够通过某种途径访问到构造函数，这就是 constructor：

![1620 7][]

20190314142246.png

因此两者的关系应该是这样：

![1620 8][]

20190314142755.png

> 注意这里的 constructor 是原型的一个属性，Constructor 指的才是真正的构造函数。两者名字不要弄混了?

## **实例、构造函数、原型之间的关系** ##

这里我们可以看到如果实例想要访问构造函数，那么应当是：

![1620 9][]

20190314143125.png

没有从实例直接访问到构造函数的属性或方法：

![1620 10][]

20190314143254.png

实例与原型则是通过上文中提到的 `__proto__` 去访问到。

在读取一个实例的属性的过程中，如果属性在该实例中没有找到，那么就会循着 `__proto__` 指定的原型上去寻找，如果还找不到，则尝试寻找原型的原型?：

![1620 11][]

20190314143837.png

我们把注释删掉，给实例同名属性，可以看到打印出来的属性就指向这个：

![1620 12][]

20190314143944.png

## **原型链** ##

原型同样也可以通过 `__proto__` 访问到原型的原型，比方说这里有个构造函数 Person 然后“继承”前者的有一个构造函数 People，然后 new People 得到实例 p

当访问 p 中的一个非自有属性的时候，就会通过 `__proto__` 作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到 Object 构造函数为止。

这个搜索的过程形成的链状关系就是原型链

![1620 13][]

20190314144733.png

如下图：

![1620 14][]

20190314145239.png

看到 null 了么，原型链搜索搜到 null 为止，搜不到那访问的这个属性就是不存在的：

![1620 15][]

20190314145540.png

以上，这就是原型、原型链、构造函数、实例、null 之间的关系。

# 构造函数、原型对象和实例之间的关系 #

要弄懂extends继承之前，先来复习一下构造函数、原型对象和实例之间的关系。

代码表示：

function F(){ } var f = new F(); // 构造器 F.prototype.constructor === F; // true F.__proto__ === Function.prototype; // true Function.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ === null; // true // 实例 f.__proto__ === F.prototype; // true F.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ === null; // true

笔者画了一张图表示：

![1620 16][]

# JavaScript实现继承 #

**继承的几种思路：**

其实理解继承，主要是理解构造函数，实例属性和原型属性的关系。要想实现继承，将不同的对象或者函数联系起来，总共就以下几种思路：

1.  原型链：父类的实例当做子类的原型。如此子类的原型包含父类定义的实例属性，享有父类原型定义的的属性。
2.  借用构造函数：子类直接使用父类的构造函数。如此子类的实例直接包含父类定义的实例属性。
3.  原型式：复制父类原型属性给子类原型。如此，子类实例享有父类定义的原型属性。
4.  寄生式：思路与3一样，只是利用工厂模式对复制的父类原型对象进行增强。

然后，1，2思路结合，实例属性继承用借用构造函数保证独立性，方法继承用原型链保证复用性，就是组合模式。 4，2思路结合，或者说3，4与1，2思路结合，实例属性继承用借用构造函数保证独立性，方法继承用原型复制增强的方式，就是寄生组合模式。

*  简介
 *  ES5实现继承的六种方式
    
     *  1. 原型链
     *  2. 借用构造函数
     *  3. 组合继承
 *  4. 原型式继承
 *  5. 寄生式继承
    
     *  6. 寄生组合式继承
 *  ES6实现继承
 *  总结

## 简介 ##

本文不准备深入细节，主要是对《JavaScript高级程序设计中》介绍的JS如何实现继承做一个总结，毕竟好记性不如烂笔头。文末会附带一张神图，搞清楚这张图，原型链也就没有什么问题了。

## ES5实现继承的几种方式 ##

### 1. 原型链 ###

基本思想：

**利用原型链让一个引用类型继承另一个引用类型的属性和方法。**

缺点：

**1. 来自原型对象的引用属性是所有实例共享的。**

**2. 创建子类实例时，无法向父类构造函数传参。**

举例如下：

// 1. 来自原型对象的引用属性是所有实例共享的 // 父类 function SuperType () { this.colors = ['red', 'blue', 'green']; } // 子类 function SubType () { } SubType.prototype = new SuperType(); // 实例 var instance1 = new SubType(); instance1.colors.push('black'); console.log(instance1.colors); // ['red', 'blue', 'green', 'black'] var instance2 = new SubType(); console.log(instance2.colors); // ['red', 'blue', 'green', 'black'] // 因为修改colors是修改的SubType.prototype.colors，所以所有的实例都会更新 复制代码

// 2. 创建子类实例时，无法向父类构造函数传参 // 调用父类是在 SubType.prototype = new SuperType() // 新建子类实例调用 new SubType() // 所以无法再new SubType() 的时候给父类 SuperType() 传参 复制代码

### 2. 借用构造函数 ###

基本思想：

**在子类构造函数的内部通过call()以及apply()调用父类构造函数。**

// 父类 SuperType function SuperType (name) { this.name = name; this.colors = ['red', 'blue', 'green']; this.getName = function () { return this.name; } } // 子类 function SubType (name) { // 继承了SuperType，同时还传递了参数 SuperType.call(this, name); // 实例属性 this.age = 20; } // 实例 var instance1 = new SubType('Tom'); instance1.colors.push('black'); console.log(instance1.name); // "Tom" console.log(instance1.getName()); // "Tom" console.log(instance1.age); // 20 console.log(instance1.colors); // ['red', 'blue', 'green', 'black'] var instance2 = new SubType('Peter'); console.log(instance2.name); // "Peter" console.log(instance2.getName()); // "Peter" console.log(instance2.age); // 20 console.log(instance2.colors); // ['red', 'blue', 'green'] 复制代码

可以看到，借用构造函数实现继承，解决了原型链继承的两个问题，既可以在新建子类实例的时候给父类构造函数传递参数，也不会造成子类实例共享父类引用变量。

但是你注意到了吗，这里我们把父类方法也写在了SuperType()构造函数里面，可以像前面一样写在SuperType.prototype上吗？

**答案是不可以**，必须写在SuperType()构造函数里面。因为这里是通过调用SuperType.call(this)来实现继承的，并没有通过new生成一个父类实例，所以如果写在prototype上，子类是无法拿到的。

缺点：

**1. 如果方法都在构造函数中定义，那么就无法复用函数。每次构建实例时都会在实例中保留方法函数，造成了内存的浪费，同时也无法实现同步更新，因为每个实例都是单独的方法函数。如果方法写在prototype上，就只会有一份，更新时候会做到同步更新。**

![1620 17][]

![1620 18][]

### 3. 组合继承 ###

基本思想：

**将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。**

使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

// 父类 function SuperType (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } SuperType.prototype.sayName = function () { console.log(this.name); } // 子类 function SubType (name, age) { // 继承父类实例属性 SuperType.call(this, name); // 子类实例属性 this.age = age; } SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function () { console.log(this.age); }; // 实例 var instance1 = new SubType('Tom', 20); instance1.colors.push('black'); console.log(instance1.colors); // ['red', 'blue', 'green', 'black'] instance1.sayName(); // "Tom" instance1.sayAge(); // 20 var instance2 = new SubType('Peter', 30); console.log(instance2.colors); // ['red', 'blue', 'green'] instance2.sayName(); // "Peter" instance2.sayAge(); // 30 复制代码

缺点：

**1. 调用了两次父类构造函数，一次通过SuperType.call(this)调用，一次通过new SuperType()调用。**

## 4. 原型式继承 ##

基本思想：

**不使用严格意义上的构造函数，借助原型可以基于已有的对象创建新的对象，同时还不必因此创建自定义类型。**

// 在object函数内部，先创建了一个临时的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。 // 从本质上讲，object()对传入其中的对象执行了一次浅复制。 function object (o) { function F() { } F.prototype = o; return new F(); } var person = { name: 'Tom', friends: ['Shelby', 'Court', 'Van'] }; var anotherPerson = object(person); anotherPerson.name = 'Greg'; anotherPerson.friends.push('Rob'); var yetAnotherPerson = object(person); yetAnotherPerson.name = 'Linda'; yetAnotherPerson.friends.push('Barbie'); console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] console.log(yetAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] 复制代码

ECMAScript5中新增了一个方法Object.create(prototype, descripter)接收两个参数：

*  prototype（必选），用作新对象的原型对象
 *  descripter（可选），为新对象定义额外属性的对象

在传入一个参数的情况下，Object.create()与前面写的object()方法的行为相同。

缺点：

**1. 和原型链继承一样，所有子类实例共享父类的引用类型。**

## 5. 寄生式继承 ##

基本原理：

**寄生式继承是与原型式继承紧密相关的一种思路，创建一个仅用于封装继承过程的函数，该函数内部以某种形式来做增强对象，最后返回对象。**

缺点：

**1. 和原型链式继承一样，所有子类实例共享父类引用类型。**

**2. 和借用构造函数继承一样，每次创建对象都会创建一次方法。**

### 6. 寄生组合式继承 ###

基本思想：

**将寄生式继承和组合继承相结合，解决了组合式继承中会调用两次父类构造函数的缺点。**

组合继承是JavaScript最常用的继承模式，它最大的问题就是无论在什么情况下，都会调用两次父类构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数内部。

// 组合继承 function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function () { alert(this.name); }; function SubType(name, age) { SuperType.call(this, name); //第二次调用 SuperType() this.age = age; } SubType.prototype = new SuperType(); //第一次调用 SuperType() SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function () { alert(this.age); }; 复制代码

组合继承在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性：name和colors；它们都是 SuperType 的实例属性，只不过现在位于 SubType的原型中。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors。于是，这两个属性就屏蔽了原型中的两个同名属性。

**所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。**

其背后的基本思路是：不必为了指定子类型的原型而调用父类的构造函数，我们需要的无非就是父类原型的一个副本而已。本质上，就是使用寄生式继承来继承父类的prototype，然后再将结果指定给子类的prototype。

寄生组合式继承的基本模型如下：

function inheritPrototype(SubType, SuperType) { var prototype = object(SuperType.prototype); // 创建对象 prototype.constructor = SubType; // 增强对象 SubType.prototype = prototype; // 指定对象 } 复制代码

实现一个完整的寄生组合式继承：

寄生组合式继承的高效率体现在它只调用了一次SuperType构造函数，并且因此避免了再SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变。因此，还能够正常使用instanceof和isPrototypeOf()。

**开发人员普遍认为寄生组合式继承是引用类型最理想的继承方式。**

### 7. 对象冒充 ###

function Person(name,age)\{

this.name = name;

this.age = age;

this.show = function()\{

console.log(this.name+", "+this.age);

function Student(name,age)\{

this.student = Person; //将Person类的构造函数赋值给this.student

this.student(name,age); //js中实际上是通过对象冒充来实现继承的

delete this.student; //移除对Person的引用

var s = new Student("小明",17);

s.show();

var p = new Person("小花",18);

p.show();

// 小明, 17

// 小花, 18

--------------------

## ES6实现继承 ##

// 父类 class SuperType { constructor(name) { this.name = name; this.colors = ["red", "blue", "green"]; } sayName() { console.log(this.name); }; } // 子类 class SubType extends SuperType { constructor(name, age) { // 继承父类实例属性和prototype上的方法 super(name); // 子类实例属性 this.age = age; } // 子类方法 sayAge() { console.log(this.age); } } // 实例 var instance1 = new SubType('Tom', 20); instance1.colors.push('black'); instance1.sayAge(); // 20 instance1.sayName(); // "Tom" console.log(instance1.colors); // ["red", "blue", "green", "black"] var instance2 = new SubType('Peter', 30); instance2.sayAge(); // 30 instance2.sayName(); // "Peter" console.log(instance2.colors); // ["red", "blue", "green"] 复制代码

用ES6的语法来实现继承非常的简单，下面是把这段代码放到Babel里转码的结果图片：

![1620 19][]

可以看到，底层其实也是用寄生组合式继承来实现的。

## 总结 ##

ES5实现继承有6种方式：

1.  原型链继承
2.  借用构造函数继承
3.  组合继承
4.  原型式继承
5.  寄生式继承
6.  寄生组合式继承

寄生组合式继承是大家公认的最好的实现引用类型继承的方法。

ES6新增class和extends语法，用来定义类和实现继承，底层也是采用了寄生组合式继承。

附图：

![1620 20][]

转载于:https://www.cnblogs.com/leftJS/p/10943482.html

[https_cloud.tencent.com_developer_article_1408283]: https://cloud.tencent.com/developer/article/1408283
[https_cloud.tencent.com_developer_article_1195938]: https://cloud.tencent.com/developer/article/1195938
[https_cloud.tencent.com_developer_article_1359936]: https://cloud.tencent.com/developer/article/1359936
[https_cloud.tencent.com_developer_article_1079079]: https://cloud.tencent.com/developer/article/1079079
[https_cloud.tencent.com_developer_article_1408335]: https://cloud.tencent.com/developer/article/1408335
[1620]: https://ask.qcloudimg.com/http-save/yehe-1500612/z8ekhlonfi.png?imageView2/2/w/1620
[1620 1]: https://ask.qcloudimg.com/http-save/yehe-1500612/wik3f4gihe.png?imageView2/2/w/1620
[1620 2]: https://ask.qcloudimg.com/http-save/yehe-1500612/cponcc9fma.png?imageView2/2/w/1620
[1620 3]: https://ask.qcloudimg.com/http-save/yehe-1500612/idbsd2a8my.png?imageView2/2/w/1620
[1620 4]: https://ask.qcloudimg.com/http-save/yehe-1500612/0xicv9buba.png?imageView2/2/w/1620
[1620 5]: https://ask.qcloudimg.com/http-save/yehe-1500612/d4sp8li06q.png?imageView2/2/w/1620
[1620 6]: https://ask.qcloudimg.com/http-save/yehe-1500612/4ur9xfr23m.png?imageView2/2/w/1620
[1620 7]: https://ask.qcloudimg.com/http-save/yehe-1500612/lskl0tpc5w.png?imageView2/2/w/1620
[1620 8]: https://ask.qcloudimg.com/http-save/yehe-1500612/48zm0vo1qi.png?imageView2/2/w/1620
[1620 9]: https://ask.qcloudimg.com/http-save/yehe-1500612/um949psi09.png?imageView2/2/w/1620
[1620 10]: https://ask.qcloudimg.com/http-save/yehe-1500612/i97zjx26b5.png?imageView2/2/w/1620
[1620 11]: https://ask.qcloudimg.com/http-save/yehe-1500612/5y4avrrdpz.png?imageView2/2/w/1620
[1620 12]: https://ask.qcloudimg.com/http-save/yehe-1500612/n1bbarhci1.png?imageView2/2/w/1620
[1620 13]: https://ask.qcloudimg.com/http-save/yehe-1500612/2i7c5mua99.png?imageView2/2/w/1620
[1620 14]: https://ask.qcloudimg.com/http-save/yehe-1500612/fib8zehnvz.png?imageView2/2/w/1620
[1620 15]: https://ask.qcloudimg.com/http-save/yehe-1500612/t0ivem3rf2.png?imageView2/2/w/1620
[1620 16]: https://ask.qcloudimg.com/http-save/yehe-2687933/jlfx9qpctu.png?imageView2/2/w/1620
[1620 17]: https://ask.qcloudimg.com/http-save/yehe-2768794/3kiqbgvbj1.png?imageView2/2/w/1620
[1620 18]: https://ask.qcloudimg.com/http-save/yehe-2768794/geqvkuwirx.png?imageView2/2/w/1620
[1620 19]: https://ask.qcloudimg.com/http-save/yehe-2768794/7dj0vqmwvj.png?imageView2/2/w/1620
[1620 20]: https://ask.qcloudimg.com/http-save/yehe-2768794/cywxjfccxu.png?imageView2/2/w/1620