三句话给你解释清楚原型和原型链三句话给你解释清楚原型和原

在前端的校园招聘面试以及社会招聘面试中，原型和原型链的相关试题基本上是必不可少的，也就说是必问的，很多人都会被这两个概念搞蒙，即使你真的了解了原型和原型链的定义，一到具体的面试题目，__proto__和prototype这两个词嵌套复用就很容易把面试者弄得一脸懵逼，但是相信你读完这篇文章，这方面的面试题肯定就不再是问题了，因为真的可以两句话轻松搞定。
首先我们先来列出几个等式，读者可以带着这些等式来阅读接下来的内容：

var object = {} object.__proto__ === Object.prototype // 为 truevar fn = function(){} fn.__proto__ ===Function.prototype// 为 true fn.__proto__.__proto__ === Object.prototype // 为 truevar array = [] array.__proto__ === Array.prototype // 为 true array.__proto__.__proto__ === Object.prototype // 为 true Array.__proto__ === Function.prototype // 为 true

然后在几个月前我写过一篇同样关于原型和原型链的博客，但几个月后回看起来，并不是特别满意，感觉并不能很清晰地把知识表达出来让读者看明白，于是才有了今天这篇文章，在上次的那篇文章中提到以下内容：

“首先，我们来讲讲浏览器的初始状态，就是在无代码的情况下，浏览器所分配到的内存的使用情况，首先浏览器会创建一个全局对象global，而在这个全局对象global内含有许多的全局函数，例如global.parseInt、global.parseFloat、global.Number、global.String、global.Boolean、global.Object等等，函数也是对象的一种，因此也会具有属性，其中一种属性为prototype，这个属性的含义便是函数的原型对象。”

这段文字，其实大家只要关注最后加粗的地方即可，这也是我们第一句要记住的话：
第一句话：prototype是函数的原型对象，即prototype是一个对象，它会被对应的__proto__引用。
接下来引入第二句要记住的话：
第二句话：要知道自己的__proto__引用了哪个prototype，只需要看看是哪个构造函数构造了你，那你的__proto__就是那个构造函数的prototype。
最后是第三句要记住的话，你可以将其理解成为第一句和第二句话的一个例外：
第三句话：所有的构造函数的原型链最后都会引用Object构造函数的原型，即可以理解Object构造函数的原型是所有原型链的最底层，即Object.prototype.__proto===null

重复一下，加深大家的印象：
第一句话：prototype是函数的原型对象，即prototype是一个对象，它会被对应的__proto__引用。
第二句话：要知道自己的__proto__引用了哪个prototype，只需要看看是哪个构造函数构造了你，那你的__proto__就是那个构造函数的prototype。
第三句话：所有的构造函数的原型链最后都会引用Object构造函数的原型，即可以理解Object构造函数的原型是所有原型链的最底层，即Object.prototype.__proto===null

好了，一切关于原型链的问题，都能够得到解决了，你不信？
行，那我们随便再出几道题目，然后来看看是不是通过两句话就能彻底解决出来。

第一道：

Object.__proto__ === ????填空???? // 为 true

求Object.__proto__，首先你要知道Object是什么数据类型，他是一个构造函数，也就是一个函数，来复习一下我们的第二句话，函数由哪个构造函数构造出来？那不是废话吗，当然是Function，因此很明显，答案就是：

Object.__proto__ === Function.prototype // 为 true

第二道：

Function.__proto__ === ????填空???? // 为 true

求Function.__proto__，一样，你要先清楚Function是什么数据类型，他同样是一个构造函数，是来用来创建（构造）一个函数的构造函数（- -!有点拗口），所以同样的，用我们的第二句话即可解决，这个构造函数同样是函数，因此答案就是：

Function.__proto__=== Function.prototype // 为 true

第三道：

true.__proto__ === ????填空???? // 为 true

求true.__proto__，有没有感觉是换汤不换药，true是什么数据类型，Boolean嘛，因此它是由构造函数Boolean构造出来的，所以答案显而易见：

true.__proto__ === Boolean.prototype // 为 true

第四道：

Function.prototype.__proto__ === ????填空???? // 为 true

求Function.prototype.__proto__，好了，这里需要第一句话和第二句话一起用了，首先根据第一句话，prototype是一个对象，然后根据第二句话，那么既然它是一个对象，他的构造函数很明显就是Object，因此答案也呼之欲出了：

Function.prototype.__proto__ ===Object.prototype // 为 true

第五道：

function Test(){} var test=new Test() test.__proto__===????填空???? // 为 true

对于自己写的构造函数，这三句话依然有效，因此答案也很容易就得出来了：

test.__proto__===Test.prototype // 为 true

【三句话给你解释清楚原型和原型链】
最后一道，必须谨记的例外：

Object.prototype.__proto__===null

这个等式也只需要记住第三句话就可以轻松解决啦，具体成立的原因在第三句话里也解释了。

最后再重复一下那三句话，再次加深大家的印象：
第一句话：prototype是函数的原型对象，即prototype是一个对象，它会被对应的__proto__引用。
第二句话：要知道自己的__proto__引用了哪个prototype，只需要看看是哪个构造函数构造了你，那你的__proto__就是那个构造函数的prototype。
第三句话：所有的构造函数的原型链最后都会引用Object构造函数的原型，即可以理解Object构造函数的原型是所有原型链的最底层，即Object.prototype.__proto===null
好了，相信以后你们再遇到关于原型还有原型链的题目，都能轻轻松松解决了！

本教程版权归饥人谷_宣泽彬和饥人谷所有，转载须说明来源