JavaScript学习笔记之constructor,prototype,__proto__解惑

引言

在学习JavaScript时，不可避免的接触到了原型和原型链的概念，结果被constructor，prototype，__proto__这些属性搞得一脸懵逼，这些都是什么鬼！！！通过谷歌浏览器调试时，看对象实例的内部结构，这三个属性也是你中有我，密不可分，完全理不清头绪。最后通过理清概念，不断验证，最终有了一些思路。

概念

要想真正弄清楚constructor，prototype，__proto__这些属性的之间的区别和联系，首先我们要明确定义：

• constructor属性始终指向创建当前对象的构造函数。
• prototype属性是每个函数对象都具有的属性，被称为原型对象，因为其本身也是个对象。
• __proto__属性是每个对象具有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例对象会继承prototype上的属性和方法。

事例

下表列出了实例对象和函数对象的区别：

	constructor	prototype	__proto__
A	✔︎	✔︎	✔︎
a	✔︎	✘	✔︎

由上表可以看出实例对象是没有prototype属性的，只有函数对象才有（这一点很重要！！！），下面用代码来具体解释下以上三个属性的关系：

JavaScript实际上执行的是：

其中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/