15条规则解析JavaScript对象布局（proto、prototype、constructor）

客官°小女子只卖身不卖艺 2022-08-07 14:58 183阅读 0赞

大家都说JavaScript的属性多，记不过来，各种结构复杂不易了解。确实JS是一门入门快提高难的语言，但是也有其他办法可以辅助记忆。下面就来讨论一下JS的一大难点-对象布局，究竟设计JS这门语言的人当时是怎么做的？设计完之后又变成了什么？  
  
  
我们来看一张图：  
  
  
![121505482112567.png][]   
  
  
相信大家对这张图都不陌生了，构造函数有一个prototype属性指向其原型。相反原型也有一个constructor指向构造函数。与此同时[实例][Link 1]也有一个constructor指向构造函数，这简直就是互相捆绑生怕找不到啊不是吗？  
  
  
还有一个我们称之为秘密链接的\_\_proto\_\_属性，原谅我第一眼见到这个属性就觉得特别的怪，\_下划线都用上了，驼峰命名规则呢？好吧，这是部分浏览器暴露出来的一个指针而已，可能当时设计的时候随便写出来，突然发现这货有点用就留下了（纯属个人猜测）。  
  
  
附上上图的检测代码不信的童鞋可以自己玩玩：

1.  <!DOCTYPE html>  
    
2.  <html>  
    
3.  <head>  
    
4.  <meta charset="utf-8">  
    
5.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    
6.  <title>JS函数原型，函数，实例的关系证明</title>  
    
7.  </head>  
    
8.  <body>  
    
9.      <script type="text/javascript">  
    
10.     function Foo()\{\} //构造函数  
    
11.     var a = new Foo(); //实例  
    
12.     console.log(Foo===Foo.prototype.constructor); //true  
    
13.     console.log(a.constructor===Foo); //true  
    
14.     console.log(Foo.prototype===Foo.prototype); //true  
    
15.     console.log(a.\_\_proto\_\_===Foo.prototype); //true  
    
16. </script>  
    
17. </body>  
    
18. </html>

复制代码

上面只是基础而已，下面才是真正的重点，为了修改这张图我可是煞费苦心，绞尽脑汁，不知道死了多少脑细胞。  
  
  
![112220395244778.jpg][]   
  
  
可能大家已经看晕了，没事冲杯咖啡慢慢看。下面是相应的证明代码，友情提示sublimeText看更爽：

1.  <!DOCTYPE html>  
    
2.  <html>  
    
3.  <head>  
    
4.  <meta charset="utf-8">  
    
5.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    
6.  <title>JavaScript对象布局</title>  
    
7.  </head>  
    
8.  <body>  
    
9.      <script type="text/javascript">  
    
10.         //以下代码全部为true  
    
11.         console.log("1:"+(Object.prototype.\_\_proto\_\_ === null));  
    
12.         console.log("2:"+(Function.prototype.\_\_proto\_\_===Object.prototype));  
    
13.         console.log("3.1:"+(Number.\_\_proto\_\_ === Function.prototype));  
    
14.         console.log("3.2:"+(Boolean.\_\_proto\_\_ === Function.prototype));  
    
15.         console.log("3.3:"+(String.\_\_proto\_\_ === Function.prototype));  
    
16.         console.log("3.4:"+(Object.\_\_proto\_\_ === Function.prototype));  
    
17.         console.log("3.5:"+(Function.\_\_proto\_\_ === Function.prototype));  
    
18.         console.log("3.6:"+(Date.\_\_proto\_\_ === Function.prototype));  
    
19.         console.log("3.7:"+(Error.\_\_proto\_\_ === Function.prototype));  
    
20.         console.log("3.8:"+(Array.\_\_proto\_\_ === Function.prototype));  
    
21.         console.log("3.9:"+(RegExp.\_\_proto\_\_ === Function.prototype));  
    
22.         console.log("4.1:"+(Math.\_\_proto\_\_===Object.prototype));  
    
23.         console.log("4.2"+(JSON.\_\_proto\_\_===Object.prototype));  
    
24.         function Foo()\{\} //构造函数  
    
25.         var f1 = new Foo(); //实例  
    
26.         console.log("5:"+(Foo===Foo.prototype.constructor));   
    
27.         console.log("6.1:"+(f1.\_\_proto\_\_===Foo.prototype));  
    
28.         console.log("7:"+(f1.constructor===Foo));   
    
29.         console.log("8.1:"+(Number.prototype.\_\_proto\_\_===Object.prototype));  
    
30.         console.log("8.2:"+(Boolean.prototype.\_\_proto\_\_===Object.prototype));  
    
31.         console.log("8.3:"+(String.prototype.\_\_proto\_\_===Object.prototype));  
    
32.         console.log("8.5:"+(Function.prototype.\_\_proto\_\_===Object.prototype));  
    
33.         console.log("8.6:"+(Date.prototype.\_\_proto\_\_===Object.prototype));  
    
34.         console.log("8.7:"+(Error.prototype.\_\_proto\_\_===Object.prototype));  
    
35.         console.log("8.8:"+(Array.prototype.\_\_proto\_\_===Object.prototype));  
    
36.         console.log("8.9:"+(RegExp.prototype.\_\_proto\_\_===Object.prototype));  
    
37.         console.log("9:"+(Foo.\_\_proto\_\_===Function.prototype));  
    
38.         var manfred = new Object();//实例对象  
    
39.         console.log("10:"+(manfred.\_\_proto\_\_===Object.prototype));  
    
40.         console.log("11:"+(Foo.prototype.\_\_proto\_\_===Object.prototype));  
    
41.         //manfred为object构造函数产生，manfred.constructor指向function Object()构造函数  
    
42.         console.log("12:"+(manfred.constructor.\_\_proto\_\_===Function.prototype));  
    
43.         console.log("13:"+(manfred.constructor===Object.prototype.constructor));  
    
44.         var hu = new Function();  
    
45.         console.log("14:"+(hu.constructor.\_\_proto\_\_===Function.prototype));  
    
46.         console.log("15:"+(hu.constructor===Function.prototype.constructor));  
    
47.     </script>  
    
48. </body>  
    
49. </html>

复制代码

相信看完这些代码和原图比较之后大家对JS对象之间的关系已经了如指掌了，确实一开始我也让这货搞得头晕晕的，但是画出这张图之后已经觉得没什么了。大家可以自己动手画一下。

[121505482112567.png]: http://bbs.html5cn.org/data/attachment/forum/201504/13/1154347pe5dqihpt1pqp52.png
[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=17
[112220395244778.jpg]: http://bbs.html5cn.org/data/attachment/forum/201504/13/115517bxed7iy5o8ccxhj7.jpg