【前端词典】必备知识-原型与原型链

前言

继承是咱们前端必须熟悉的一个知识点。可依旧有不少前端对继承的实现和应用没有一个总体的把握。追其缘由无非有二：

1. ECMAScript 继承的实现方法区别于其余基于类的实现继承的面向对象（Object Oriented）语言。

   
   

2. 工做中即便对如何实现继承只知其一;不知其二，也一点都不耽误写逻辑代码。

不管因为哪个缘由，建议请尽快弄懂继承的实现和应用，不然你可能会如同你的表情包同样——流下了没有技术的泪水。

接下来我会尽我所能讲清楚继承这个概念，并结合相关经典图文作辅助解释。

在讲 ECMAScript 继承的概念以前，我先说下类和原型的概念。

类与原型

类

讲 ECMAScript 继承的概念以前，我先说下类的概念。（若是接触过 Java 或者是 C++ 的话，咱们就知道 Java（C++）的继承都是基于类的继承）。

类: 是面向对象（Object Oriented）语言实现信息封装的基础，称为类类型。每一个类包含数听说明和一组操做数据或传递消息的函数。类的实例称为对象。

类: 是描述了一种代码的组织结构形式，一种在软件中对真实世界中问题领域的建模方法。

类的概念这里我就再也不扩展，感兴趣的同窗能够自行查阅书籍。接下来咱们重点讲讲原型以及原型链。

原型

JavaScript 这门语言没有类的概念，因此 JavaScript 并不是是基于类的继承，而是基于原型的继承。（主要是借鉴 Self 语言原型（ prototype）继承机制）。

注意：ES6 中的 class 关键字和 OO 语言中的类的概念是不一样的，下面我会讲到。ES6 的 class 其内部一样是基于原型实现的继承。

JavaScript 摒弃类转而使用原型做为实现继承的基础，是由于基于原型的继承相比基于类的继承上在概念上更为简单。首先咱们明确一点，类存在的目的是为了实例化对象，而 JavaScript 能够直接经过对象字面量语法轻松的建立对象。

每个函数，都有一个 prototype 属性。 全部经过函数 new 出来的对象，这个对象都有一个 __proto__ 指向这个函数的 prototype。 当你想要使用一个对象（或者一个数组）的某个功能时：若是该对象自己具备这个功能，则直接使用；若是该对象自己没有这个功能，则去 __proto__ 中找。

1. prototype [显式原型]

prototype 是一个显式的原型属性，只有函数才拥有该属性。
每个函数在建立以后都会拥有一个名为 prototype 的属性，这个属性指向函数的原型对象。( 经过 Function.prototype.bind 方法构造出来的函数是个例外，它没有 prototype 属性 )。

prototype 是一个指针，指向的是一个对象。好比 Array.prototype 指向的就是 Array 这个函数的原型对象。

在控制台中打印 console.log(Array.prototype) 里面有不少方法。这些方法都以事先内置在 JavaScript 中，直接调用便可。上面我标红了两个特别的属性 constructor 和 __proto__。这两个属性接下来我都会讲。

咱们如今写一个 functionnoWork(){} 函数。

当我写了一个 noWork 这个方法的时候，它自动建立了一个 prototype 指针属性（指向原型对象）。而这个被指向的原型对象自动得到了一个 constructor (构造函数)。细心的同窗必定发现了： constructor 指向的是 noWork。

1. noWork.prototype.constructor === noWork     // true

2. 
   

3. // 一个函数的原型对象的构造函数是这个函数自己

tips: 图中打印的 Array 的显式原型对象中的这些方法你都知道吗？要知道数组也是很是重要的一部分哦 ~  咳咳咳，这是考试重点。

2. __proto__[隐式原型]

prototype 理解起来不难， __proto__ 理解起来就会比 prototype 稍微复杂一点。不过当你理解的时候你会发现，这个过程真的颇有趣。下面咱们就讲讲 __proto__。

其实这个属性指向了 `[[prototype]]`，可是 `[[prototype]]`  是内部属性，咱们并不能访问到，因此使用 `__proto__` 来访问。

我先给个有点绕的定义：

__proto__ 指向了建立该对象的构造函数的显式原型。

咱们如今仍是使用 noWork 这个例子来讲。咱们发现 noWork 原型对象中还有另外一个属性 __proto__。

咱们先打印这个属性：咱们发现这个 __proto__ 指向的是 Object.prototype。

我听到有人在问为何？

1. 由于这个 __proto__.constructor 指向的是 Object。

2. 咱们知道：一个函数的原型对象的构造函数是这个函数自己。

3. 因此这个 __proto__.constructor 指向的是 Object.prototype.constructor。

4. 进而 __proto__ 指向的是 Object.prototype。

       

至于为何是指向 Object？ 由于全部的引用类型默认都是继承 Object 。

做用

1. 显式原型：用来实现基于原型的继承与属性的共享。

2. 隐式原型：构成原型链，一样用于实现基于原型的继承。 举个例子，当咱们使用 noWork 这个对象中的 toString() 属性时，在 noWork 中找不到，就会沿着 __proto__ 依次查找。

3. new 操做符

当咱们使用 new 操做符时，生成的实例对象拥有了 __proto__属性。即在 new 的过程当中，新对象被添加了 __proto__ 而且连接到构造函数的原型上。

new 的过程

1. 新生成了一个对象

2. 连接到原型

3. 绑定 this

4. 返回新对象

Function.__proto__===Function.prototype

难道这表明着 Function 本身产生了本身? 要说明这个问题咱们先从 Object 提及。

咱们知道全部对象均可以经过原型链最终找到 Object.prototype ，虽然 Object.prototype 也是一个对象，可是这个对象却不是 Object 创造的，而是引擎本身建立了 Object.prototype 。 因此能够这样说:

全部实例都是对象，可是对象不必定都是实例。

接下来咱们来看 Function.prototype 这个特殊的对象:

打印这个对象，会发现这个对象实际上是一个函数。咱们知道函数都是经过 newFunction() 生成的，难道 Function.prototype 也是经过 newFunction() 产生的吗？这个函数也是引擎本身建立的。

首先引擎建立了 Object.prototype ,而后建立了 Function.prototype，而且经过 __proto__ 将二者联系了起来。

这就是为何 Function.prototype.bind() 没有 prototype 属性。由于 Function.prototype 是引擎建立出来的对象，引擎认为不须要给这个对象添加 prototype 属性。

对于为何 Function.__proto__ 会等于 Function.prototype ? 我看到的一个解释是这样的：
其余全部的构造函数均可以经过原型链找到 Function.prototype ，而且 functionFunction() 本质也是一个函数，为了避免产生混乱就将 functionFunction() 的 __proto__ 联系到了 Function.prototype 上。

后话

若是你想进【大前端交流群】，关注公众号点击“交流加群”添加机器人自动拉你入群。关注我第一时间接收最新干货。