共计 7355 个字符，预计需要花费 19 分钟才能阅读完成。
前言
在前端开发过程中，波及到 JS 原理相干的内容也就是罕用的几大模块，不仅罕用而且很重要，然而波及到原理的话会有点难懂，尤其是对 JS 接触不太久的开发者来讲。本篇博文就来分享一下对于 JS 的原型和原型链相干的知识点，尽管简单、难懂然而很重要，值得珍藏，不便前期查阅应用。
一、prototype
背景
JS 中，除了根本数据类型（也叫简略数据类型）之外的类型，都是援用数据类型（也叫简单数据类型），即对象；也就是说，在 JS 的宇宙中，所有皆是对象。
在 ES6 之前，因为 JS 中没有类的概念（在 ES6 的时候引入了 class，但其也只是语法糖），在理论开发中想要将所有的对象关联起来就成了问题，于是原型和原型链的概念应运而生。
原型字面释义（来源于网络）
原型（prototype）这个词来自拉丁文的词 proto，意谓“最后的”，意义是模式或模型。在非技术类的文中，一个原型是给定品种的一个代表性例子。
在以原型为根底的程序方面，一个原型是一个最后的对象（object）；新的物体藉由复制原型产生。
JS 中原型（Prototype）的概念
对于这个 JS 中的原型概念，网上有太多文章，释义也是大同小异，那么在这里依据网上有用的释义以及本人的总结，从新总结一下 JS 中原型的概念，由浅及深的释义，具体如下所示：
JS 中的原型（Prototype）是基于继承来讲的，其实原型就是一个对象，它是 JS 中继承的根底，JS 外面的继承就是基于原型来继承的，原型的作用就是为了实现对象的继承。JS 中每个对象在创立的时候都会与之关联另外一个对象，这个关联的对象就是原型，每个对象都会从原型中继承。须要留神的是 object 比拟非凡，它没有对应的原型。
原型（Prototype）的其余释义
原型能够了解为是一个 JS 办法的属性，每次在创立函数办法的时候，JS 会将一个名字为 prototype 的属性增加到函数办法上，这个 prototype 就是该函数办法的原型对象，它默认有一个 constructor 的属性指向原来办法的对象，任何增加到 prototype 的属性和办法都在这个 constructor 外面，所有同类的实例会共享这个原型对象，实例对象__proto__属性指向这个对象，办法的 prototype 属性指向这个对象。
其实，每个函数都会对应有一个 prototype 属性，prototype 就是应用构造函数创立的对象的原型，它其实是一个指针，指向原型对象，该原型对象蕴含属性和办法能够被所有实例共享应用，构造函数中的 prototype 是显性原型，原型对象有一个 constructor 属性，指向函数自身。
原型对象（prototype）
为什么下面解释过原型的内容之后，这里再写原型对象呢？是因为网上写法太多，容易让不太分明的开发者呈现云里雾里的感觉，所以再独自提一下。具体如下所示：function Function(){}console.log(Function.prototype) 输入后果如下所示：
在 JS 中，每个函数都有一个 prototype 属性，这个属性指向函数的原型（也叫显式原型），这个原型是一个对象，所以 prototype 也叫原型对象，每一个 JS 对象都会从一个 prototype 中继承属性和办法。
每个实例对象（object）都有一个公有属性（即__proto__）指向它的构造函数的原型对象，该原型对象也有一个本人的原型对象，逐层向上直到一个对象的原型对象为 null 的时候，依据定义流程来讲，null 是没有原型的，所以到这里就作为一个原型链中的最初一步，原型链会在上面介绍。
__proto__属性(留神 proto 左右两边各是 2 个下划线)
JS 中的所有对象（null 除外）都存在一个__proto__属性（__proto__不是规范属性，只实用于部分的浏览器，规范的形式是应用 Object.getPrototypeOf()），__proto__指向实例对象的构造函数的原型（即原型对象），__proto__个别也被叫做隐式原型，它也蕴含一个 constructor 属性，该属性指向的是创立该实例的构造函数，具体示例如下所示：
function Student(name) {this.name = name;}
var student = new Student("LiMing");
console.log(student._proto === Student.prototype) // 输入后果为：true通过下面示例能够看到，stu 是实例对象，Student 是 student 的构造函数，student 的__proto__属性指向构造函数 Person 的原型。最初，其实绝大多数的浏览器都反对__proto__这个非标准的办法拜访原型，但它不存在于 Student.prototype 中，实际上是来自于 Object.prototype，相当于是一个 getter/setter，在须要应用 object.proto 的时候就是返回的 Object.getPrototypeOf(object)。
留神：如果调用实例对象的办法查不到，就会去原型对象外面持续查找。
hasOwnProperty 办法
当去拜访一个对象的属性的时候，该属性可能来自该对象本人，也可能来自该对象的属性指向的原型，在不确定这个对象的起源的时候，就要用到 hasOwnProperty()办法来判断一个属性是否来自对象本身。
留神 ：通过 hasOwnProperty() 办法能够判断一个对象是否在对象本身中增加，但不能够判断是否存在于原型中，因为极有可能该属性就不存在，即在原型中不论属性存在与否都会返回 false。
in 关键字(操作符)
in 关键字或者说是操作符，是用来判断一个属性是否存在于该对象中，但在查找这个属性的时候，首先会在对象本身中查找，如果在对象本身中找不到会再去原型中找。也就是说只有对象和原型中有一个中央存在该属性，就返回 true。
延长：在判断一个属性是否存在于原型中，若该属性存在，但不在对象本身中，那么该属性肯定存在于原型中！
原对象的原型
在 JS 中所有原有援用类型都会在其构造函数的原型上定义方法，也就是通过 Object 构造函数生成的，应用最原始的形式创立，实例的 proto 指向构造函数的 prototype。
原型与实例
当读取实例属性的时候，若找不到该属性，就会查找与该实例关联的原型中的属性，若还查不到，就会去找原对象的原型，依此类推，直到找到最上层为止。
原型的作用
1、应用曾经继承的办法解决办法过载的问题；
2、针对类的性能进行扩大，削减内置的办法和属性等。
原型中的 this 指向
原型中的 this 指向实例化对象。
原型拜访的形式
对于原型拜访的形式：如果想要拜访一个对象的原型，能够通过 ES5 中的 Object.getPrototypeOf()办法和 ES6 中的__proto__属性两种形式来拜访。
原型对象的应用场景
在理论开发中，开发者可能会应用 JS 类库，然而当发现以后的库中不存在想要的属性或者办法的时候，不能批改源码的状况下且不想给每个实例对象独自定义相干属性和办法的时候，此时就能够思考应用原型对象来进行扩大应用。
原型应用的示例
示例一：把移除数组中的值的办法增加到数组的原型上，在应用的时候只用调用函数填入值即可。
具体如下所示：
let fruits =["apple","banana","cherry","orange","melone"];
Array.prototype.remove = function(v){this.splice(v,1); // 依据输出的下标截取对应的一个元素
return this;
}
fruits.remove(2); // 输出数组的下标，这里是想要移除数组的第 3 个元素 console.log("----fruits:",fruits); // 输入后果为：'apple', 'banana', 'orange', 'melone'示例二：通过应用原型对象来扩大自定义的对象
function Student() {} // 定义 Student 结构器
var stu = new Student(); // 实例化对象
stu.name = "zhoujielun";stu.age = 28;/* 此时发现短少了手机号属性，应用原型对象进行扩大 **/
Student.prototype.phone = "185****1111";console.log(stu.phone) // 输入后果为：185****1111示例三：对于原型的测试题
function Aaa(){}
function Bbb(value){this.value = value;}
function Ccc(value){if(value){this.value = value;}
}
Aaa.prototype.value = 1;
Bbb.prototype.value = 1;
Ccc.prototype.value = 1;
console.log(new Aaa().value); // 输入后果为：1
console.log(new Bbb().value); // 输入后果为：undefinedconsole.log(new Ccc(2).value); // 输入后果为：2下面输入后果的剖析，new Aaa()为构造函数创立的对象，它本身没有 value 属性，所以会向它的原型去找，发现原型的 value 属性的属性值为 1，所以输入值为 1；new Bbb() 为构造函数创立的对象，该构造函数有参数 value，但该对象没有传参数，所以输入值为 undefined；new Ccc()为构造函数创立的对象，该构造函数有参数 value，且传的参数值为 2，执行函数外部检测到 if 条件为真的时候，执行语句 this.value = 2，所以输入值为 2.
构造函数(constructor)
构造函数 (constructor) 的定义，其实就是通过借助 new 关键字来调用（实例化对象）的函数，就叫做构造函数。JS 中每个原型都会对应一个 constructor 的属性，指向它关联的构造函数。
构造函数是一个“真”函数，它在定义的时候须要首字母大写，任何的函数都能够作为构造函数来应用，构造函数和一般函数的区别在于性能层面来辨别的，构造函数的次要性能是初始化对象，且要和 new 关键字一起应用，应用 new 就是在从无到有的新建对象，构造函数是为初始化的对象增加属性和办法。
引申 ：new 关键字，在申请内存、创建对象的时候调用 new，程序后盾会隐式执行 new Object() 来创建对象，所以通过 new 关键字创立的字符串、数字不是援用类型，而是非值类型。构造函数示例，具体如下所示：
// 这是一个构造函数。function Student(name) {this.name = name;}
var con = new Student("LiMing"); // 构造函数
if(con.constructor == String) {console.log("112233");}构造函数其余方面
1、一个构造函数会生成一个实例的原型 (prototype) 属性，通过它能够指向对应的实例原型（即原型对象）；
2、原型对象有一个 constructor 属性，通过它能够指向对应的构造函数；
3、构造函数和原型对象，通过属性能够互相指向；
4、new 一个对象指的是 new 构造函数，new 创立之后，就产生了一个实例对象（这里的实例对象不是原型对象），实例对象会继承原型对象的办法。
原型 (prototype)、构造函数(constructor)、实例对象(即__proto__) 的关系
构造函数和实例对象的关系：在每个实例对象中的__proto__外面，同时会有一个 constructor 属性，这个 constructor 属性指向创立该实例的构造函数。
实例对象和构造函数的关系 ：每个实例对象中的__proto__指向构造函数中的 prototype，二者是相等的。
其余一：原型适宜封装办法，构造函数适宜封装属性，把这二者联合起来就组成了组合模式。
其余二：将所有的属性和办法封装在同一个构造函数中，叫做动静原型模式，只是在须要的时候才会在构造方法中初始化原型，这就整合了构造函数和原型的有点。
函数对象汇总
prototype：JS 中所有函数都有的 prototype 属性，是一个显式原型。__proto__：JS 中任何对象都有的__proto__属性，是一个隐式原型。constructor：JS 中所有的 prototype 和实例对象都有的 constructor 属性。也就是，当申明一个 function 的办法时，会给该办法增加一个 prototype 属性，指向默认的原型对象，而且该 prototype 的 constructor 属性也指向办法对象，这两个属性会在创立 d 对象的时候被对象的属性援用。
二、原型链
拜访对象的过程
在 JS 中拜访一个对象，首先查看的是该对象本身是否具想要应用的属性或办法，如果有则间接应用；若没有，就在原型链上顺次查找是否领有想要应用的属性或办法，然而不会查找本身的 prototype；逐级查找，有则应用，无则持续向上查找，直到找到为止，应用递归拜访到最终止境，找不到的止境，值就是 null。
原型链的概念
原型链其实是原型的查找机制，即一条寻址链条，原型上的属性和办法的查找都是依照肯定程序沿着原型链进行查找的。JS 中每个对象都对应有一个 proto 属性，隐式原型的指向造成的一个线性的链条，即原型链。
在 JS 中每个函数都存在一个原型对象，且所有函数的默认原型都是 Object 实例，每个继承父类函数的子函数的对象都蕴含一个外部属性 proto，该属性蕴含一个指针指向父类函数的 prototype，如果父类函数的原型对象的 proto 属性为更上一层的祖父类函数，这个程序过程就是原型链。
上图，由互相关联的原型组成的链状构造就是原型链，即红色的这条线的过程。
原型指针是什么？
原型指针是通过连贯原型对象之间的地址桥梁，它是两头连贯作用。原型对象其实蕴含两局部内容：原型数据和原型指针，原型数据是用来存储办法和属性，原型指针是为了测验验证圆形链表进行查找操作。
如果让原型对象等于另一个类型的实例对象，原型对象将蕴含一个指向另一个原型对象的指针，对应的另一个原型对象中也蕴含一个指向另一个构造函数的指针；如果另一个原型对象又是另外一个类型的实例对象，那么下面形容的关系仍然成立；依此层层递进，就形成了实例对象与原型对象的链条，这就是原型链的概念。
原型链规定
在 new 关键字构建的实例对象之后，它的原型指针指向这个类的原型对象，原型对象指针会默认指向 Object 原型对象。
原型链特点
1、原型链的作用就是用来实现继承的；
2、在蕴含援用类型值的原型属性或办法会被所有的实例共享应用；
3、在创立子类型构造函数的时候，无奈向超类型的构造函数中传递参数；
4、在读取对象的属性时，会主动到原型链中查找对应的属性；
5、给对象的属性设置值的时候，不会查找原型链，若以后对象中没有该属性，则间接增加该属性并设置对应的值；
6、原型中定义方法，构造函数定义属性到对象的本身。
原型链的作用
在拜访实例对象的属性和办法的时候，如果该实例对象不存在该属性或办法，那就会在该实例对象的原型上查找，如果仍然查不到，就会在原型的原型上查找，以此类推，直到找到原型的起点。通过原型链能够让实例对象可能获取到它原型上的属性或办法。
原型链示例
示例一：新建数组，而数组办法就是从数组的原型上继承
// 数组的原型上含有数组须要应用的各种办法，要想应用就是通过继承。var array = []; // 创立新的数组
arr.map === Array.prototype.map; // 继承数组原型上的 map 办法，也就是从 arr.__proto__下面继承的，而 arr.__proto__也就是 Array.prototype。示例二：输入上面的各个后果
Fun.prototype.x = 1;
var fun1 = new Fun()
Fun.prototype = {x:2, y:3}
var fun2 = new Fun();
console.log(fun1.x,fun1.y) // 输入后果：1 undefinedconsole.log(fun2.x,fun2.y) // 输入后果：2 3示例三：输入上面的各个后果
var Fun = function Fun(){}
Object.prototype.x = function(){console.log('x()')}
Function.prototype.y = function(){console.log('y()')}
var fun = new Fun()
fun.x()
fun.y()
Fun.x()
Fun.y()输入后果为：x() undefined x() y()原型链的终结
原型链的终结就是 null，在 Object.prototype 的原型为 null，即 Object.prototype 就是原型链的终结。所以 Object.prototype.__proto__ 的值为 null 和 Object.prototype 没有原型，其实表白的是同一个意思，即在查找属性的时候查到 Object.prototype 就能够进行查找了。
延长：实现类的继承
JS 中实现类的继承（ES6 以前）分为两步：继承构造函数中的属性和办法（构造函数继承）；继承对象原型中的属性和办法（原型链继承）。
ES6 当前的继承，可利用 class 关键字联合 extends 关键字来实现继承。ES6 中引入了 class 关键字来申明类，而 class（类）可通过 extends 来继承父类中属性和办法，语法为“class 子类名 extends 父类名{…};”。
最初
通过本文对于 JS 中原型和原型链的介绍，如果认真浏览并且实际示例，应该会很好的把握这些知识点，尽管篇幅的内容不少，然而离开来看会感觉没那么简单，同时也整合了其余的汇总，是一篇值得浏览的文章，尤其是对于原型和原型链还不是太分明的开发者来说甚为重要，不论是在开发过程中还是在面试求职中，这个知识点是必备的，重要性就不在赘述。欢送关注，一起交换，共同进步。
本文参加了「SegmentFault 思否写作挑战赛」，欢送正在浏览的你也退出。