强大的原型和原型链

前两次总结了JavaScript中的基本数据类型（值类型<引用类型>，引用类型<复杂值>）以及他们在内存中的存储，对内存空间有了一个简单的了解，以及第二次总结了this深刻浅出的用法，咱们知道了this的用法取决于函数四种调用的方式。

这一次咱们来对JavaScript中原型以及原型链作一个深刻浅出的理解。

JavaScript深刻浅出系列

1）复杂值vs原始值&&内存空间 - JavaScript深刻浅出（一）

2）this的用法 – JavaScript深刻浅出（二）

3） 原型那些事 - JavaScript深刻浅出（三）

待续......关于原型的话题都会变得严肃。

实际上，原型只是一个被称为"原型"的空对象属性，它是由JavaScript在后台建立（固然咱们知道了它的原理，能够手动完成这项工做）；

当你建立一个函数时，这个函数都会有一个prototype属性（无论你是不把它当作一个构造函数使用）。

βヾ(,,・∇・,,川←那么咱们具体来看一下吧！！！

原型链概要

prototype属性是JavaScript为每一个Function实例建立的一个对象。

具体的说："它将经过new关键字建立的<对象实例>连接回建立它们的<构造函数>" 。就这样，咱们能够共享或继承通用的方法和属性。当咱们在属性查找时，就会不自觉的开启了咱们的原型链之旅

让咱们经过一个简单的例子开启咱们的原型链查询之旅：咱们使用Array构造函数建立一个数组，而后调用join方法

我想上面的例子对于js入门者是很是简单的，那么可是咱们再来仔细了解一下，你发现join方法并无定义为myArray对象实例的属性，可是咱们建立的数组却能够访问join()方法，就好像咱们原本就能够访问似的。

join()是在哪一个地方定义的呢？

事实上，咱们常用的join()，slice()，push()...等这些内建的方法，都被定义为了Array()构造函数的prototype属性的属性。因为在咱们建立的myArray数组中没有找到join(),所以JavaScript会在原型链中查找join()方法；

其实这样作咱们很容易就联想到了效率和重用，经过把该属性添加到原型中去，咱们全部的数组都有充分利用了相同的join()函数，而不须要为每个数组实例都建立函数的新实例。

原型在全部的function()实例上都是标准的

咱们知道建立函数两种方法

一、调用Function构造函数法：

二、使用字面量法：

其实，即便不直接使用Function构造函数，而是使用字面量表示法，全部的函数也都是由Function()构造函数建立的

咱们用字面量方法建立了一个函数，发现它的prototype和Function()构造函数同样，都指向了object()，这也就证明了咱们上所说的.

 默认的prototype属性是object()对象

上面我已经谈到，实际上，原型只是一个被称为'原型'的空对象属性，它在JavaScript的后台已经建立，而且经过Function()构造函数来使用。

咱们能够手动完成这项在后面完成的工做，以便了解它的机制。

上面的代码很是简单，实际上也很是好用，它实质上复制了JavaScript在后面已经完成的工做。

将构造函数建立的实例连接至构造函数的prototype属性

将构造函数所建立的实例连接至构造函数的prototype属性，让咱们开始这条神秘的_proto_连接

上面咱们所原型只是一个对象，可是它是特殊的，由于原型链将每一个实例都连接至其构造函数的prototype属性。

建立的对象实例和建立对象的构造函数的prototype属性

固然，咱们除了使用_proto_连接，还可使用构造函数属性：

事实上，_proto_  ===  constructor.prototype

 这样咱们就不难理解，下面能够达到一样的效果：

 

上面的例子中我写到直接使用链也是能够的，下面会介绍它的查询顺序。虽然我相信对于入门者都是使用的链查询，可是咱们有必然要知道它背后的那些机制。

其实有只看不见的手，在帮助着咱们的代码完成任务

原型链的最后是Object.prototype

那么就让咱们来看一下它的原型链查询吧。

因为prototype属性是一个对象，所以原型链或查询的最后一站是Object.prototype。

 

我想上面的代码，对于咱们来讲是丝绝不费力气的，但就借这个简单的例子，最后一个简单的undefined结果，却经历了一段不为咱们所见的原型链查询；

咱们建立了一个myArray空数组，而后咱们试图访问未定义的myArray属性时，并不会直接返回undefined，而是要经历一段原型链查询。

①在myArray对象中查找foo属性；

若是没有找到

②则在Array.prototype中查找该属性；

但它在哪里也没有定义，

③最后查找的地方就是Object.prototype

三个对象中都没有定义，最后才给咱们了一个undefined的回馈。因此请好好对待你的undefined吧，由于它的出现一波三折，还真不容易啊。。哈哈

用新对象替换prototype属性会删除默认的构造函数属性

咱们能够用一个新值来替换prototype属性的默认值，可是须要特别注意的是：这么作会删除在"预制"原型对象中找到的默认的constructor属性，除非咱们手动指定一个 ；

　　

因此当你想要替换JavaScript设置的默认的prototype属性(与一些js oop模式相似)，应该从新链接引用该构造函数的构造函数属性。

下面咱们简单的改一下上面的代码，以便构造函数属性可以再次为适当的构造函数提供引用

继承原型属性的实例老是可以得到最新值

其实prototype是动态的继承原型的属性的实例老是可以得到最新值，

这一点比较简单，不论是使用原型对象仍是本身的对象覆盖它，继承原型属性的实例老是可以得到新值。

可是咱们须要注意下面的一点：

  丨

  丨

  丨

用新对象替换prototype属性不会更新之前的实例

 当你想用一个新对象彻底替换prototype属性时，以为全部的实例都会被更新，那么就即将要走向一条寻错的道路，可能会获得意想不到的结果。

建立一个实例时，该实例将在实例化时绑定至"刚完成"的原型，提供一个新对象做为prototype属性不会更新已建立的实例和原型之间的链接

这里的重点是，一旦开始建立实例，就不该用一个新对象那个来替换对象的原型，这样将会致使实例有一个指向不一样原型的连接

 自定义构造函数实现原型继承

 当咱们在自定义构造函数时，一样能够实现原型继承:

 

上面咱们写的例子，很好的利用原型链，来建立一个构造函数。若是咱们不提供参数的话，构造函数则能够继承legs和arms属性。若是传入参数，就遮盖继承的属性

 建立继承链

咱们自定义的构造函数实现了原型继承，设计原型继承的目的是要在传统的面向对象编程语言中找到模仿继承模式的继承链。继承只是一个对象能够访问另外一个对象的属性。

接下来咱们来建立一个简单的继承链：

事实上，上述代码我作的仅仅是利用一个已有的原生对象。

Person()和prototype属性的默认的object()值没有什么不一样，这也正是一个prototype属性包含默认空object()值所发生的事情，查找用于建立对象的构造函数的原型（即object.prototype），以便查找所继承的属性。

：：咱们为何要关注prototype属性呢？

（但愿下面能够给<JavaScript入门者>一个了解prototype的理由）

你可能不喜欢原型继承，而是更多的喜欢采用另外一种模式的对象继承。可是：

①原生构造函数（如Ocject(),Array(),Function()...）都使用了prototype属性，以便让你的实例能够继承属性和方法。

②若是想要更好的理解JavaScript，咱们须要了解JavaScript自己是如何使用prototype对象的

③当你自定义一个构造函数时，能够像JavaScript原生对象那样使用继承，就必需要知道他是如何工做的

④经过使用原型继承，咱们能够建立有效的对象实例。由于并不是全部的数组对象都须要他们本身的join()方法<我想这就须要咱们作些工做了>，但全部的实例均可以利用相同的join()方法，这就提升了效率和重用性。

 写在后面

到这里咱们的函数原型属性的深刻浅出系列已经介绍完毕了，这篇博文但愿能够帮助初学者--记住原型链层次结构的工做原理、对于易混淆的原型继承属性有一个分类，解决初学者心中的原型困惑

 

喜欢的话，关注一下吧，你的关注和支持就是给我最大的动力