引言
在学习JavaScript时，不可避免的接触到了原型和原型链的概念，结果被constructor，prototype，__proto__这些属性搞得一脸懵逼，这些都是什么鬼！！！通过谷歌浏览器调试时，看对象实例的内部结构，这三个属性也是你中有我，密不可分，完全理不清头绪。最后通过理清概念，不断验证，最终有了一些思路。
概念
要想真正弄清楚constructor，prototype，__proto__这些属性的之间的区别和联系，首先我们要明确定义：
-
constructor属性始终指向创建当前对象的构造函数。 -
prototype属性是每个函数对象都具有的属性，被称为原型对象，因为其本身也是个对象。 -
__proto__属性是每个对象具有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例对象会继承prototype上的属性和方法。
事例
下表列出了实例对象和函数对象的区别：
| constructor | prototype | __proto__ | |
|---|---|---|---|
| A | ✔︎ | ✔︎ | ✔︎ |
| a | ✔︎ | ✘ | ✔︎ |
由上表可以看出实例对象是没有prototype属性的，只有函数对象才有（这一点很重要！！！），下面用代码来具体解释下以上三个属性的关系：
<script type="text/javascript">
function A() {};
var a = new A();
</script>
JavaScript实际上执行的是：
<script type="text/javascript">
function A() {};
var a = new Object();
a.__proto__ = A.prototype;
A.call(a);
</script>
其中A.prototype也是个对象，它由constructor和__proto__属性组成 （这一点很重要！！！），它的构造过程如下：
A.prototype = new Object();
A.prototype.constructor = A;
A.prototype.__proto__ = Object.prototype;
Object和Function原型对象
-
JavaScript中的所有对象都来自Object，所有对象从Object.prototype继承方法和属性，尽管它们可能被覆盖。例如，其他构造函数的原型将覆盖constructor属性并提供自己的toString()方法。Object原型对象的更改将传播到所有对象，除非受到这些更改的属性和方法沿原型链进一步覆盖。它的构造过程如下：Object.prototype = new Object(); Object.prototype.constructor = Object; Object.prototype.__proto__ = null; ... Object.__proto__ = Function.prototype; -
全局的
Function对象没有自己的属性和方法, 但是, 因为它本身也是函数，所以它也会通过原型链从Function.prototype上继承部分属性和方法。Function实例从Function.prototype继承了一些属性和方法。 同其他构造函数一样， 你可以改变构造函数的原型从而使得所有的Function实例的属性和方法发生改变。它的构造过程如下：Function.prototype = new Function(); Function.prototype.constructor = Function; Function.prototype.__proto__ = Object.prototype; ... Function.__proto__ = Function.prototype;
验证
我们通过谷歌浏览器来进行调试，来验证我们的结论，先来看下Object原型对象，如下图：
再来看下Function原型对象，如下图：
最后看下a和_a实例对象，如下图：
测试代码
红框框住的部分就是所谓的原型链，原型链中的方法，实例对象a和_a都可以访问，JavaScript也是用原型链来实现继承的。
另外，还有一件有趣的事情，如下图：
无限递归
可以无限延展下去，是不是很有趣，有兴趣的同学可以试一下，可以加深你对这三个属性的理解，哈哈😄。
结语
关于怎么用原型和原型链来实现继承，网上有很多好的博文供大家参考，大家也可以参考以下链接，我在这里就不再废话了。本文如有错误，希望指正，不胜感激！
参考链接
https://segmentfault.com/a/1190000000662547
https://segmentfault.com/a/1190000003017751
http://blog.jobbole.com/9648/
网友评论