大家都说JavaScript的属性多，记不过来，各种结构复杂不易了解。确实JS是一门入门快提高难的语言，但是也有其他办法可以辅助记忆。下面就来讨论一下JS的一大难点-对象布局，究竟设计JS这门语言的人当时是怎么做的？设计完之后又变成了什么？

我们来看一张图：

 相信大家对这张图都不陌生了，构造函数有一个prototype属性指向其原型。相反原型也有一个constructor指向构造函数。与此同时实例也有一个constructor指向构造函数，这简直就是互相捆绑生怕找不到啊不是吗？

还有一个我们称之为秘密链接的__proto__属性，原谅我第一眼见到这个属性就觉得特别的怪，_下划线都用上了，驼峰命名规则呢？好吧，这是部分浏览器暴露出来的一个指针而已，可能当时设计的时候随便写出来，突然发现这货有点用就留下了（纯属个人猜测）。

附上上图的检测代码不信的童鞋可以自己玩玩：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>JS函数原型，函数，实例的关系证明</title>

</head>

<body>

    <script type="text/javascript">

    function Foo(){} //构造函数

    var a = new Foo(); //实例

    console.log(Foo===Foo.prototype.constructor); //true

    console.log(a.constructor===Foo); //true

    console.log(Foo.prototype===Foo.prototype); //true

    console.log(a.__proto__===Foo.prototype); //true

</script>

</body>

</html>

上面只是基础而已，下面才是真正的重点，为了修改这张图我可是煞费苦心，绞尽脑汁，不知道死了多少脑细胞。

可能大家已经看晕了，没事冲杯咖啡慢慢看。下面是相应的证明代码，友情提示sublimeText看更爽：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>JavaScript对象布局</title>

</head>

<body>

    <script type="text/javascript">

        //以下代码全部为true

        console.log("1:"+(Object.prototype.__proto__ === null));

        console.log("2:"+(Function.prototype.__proto__===Object.prototype));

        console.log("3.1:"+(Number.__proto__ === Function.prototype));

        console.log("3.2:"+(Boolean.__proto__ === Function.prototype));

        console.log("3.3:"+(String.__proto__ === Function.prototype));

        console.log("3.4:"+(Object.__proto__ === Function.prototype));

        console.log("3.5:"+(Function.__proto__ === Function.prototype));

        console.log("3.6:"+(Date.__proto__ === Function.prototype));

        console.log("3.7:"+(Error.__proto__ === Function.prototype));

        console.log("3.8:"+(Array.__proto__ === Function.prototype));

        console.log("3.9:"+(RegExp.__proto__ === Function.prototype));

        console.log("4.1:"+(Math.__proto__===Object.prototype));

        console.log("4.2"+(JSON.__proto__===Object.prototype));

        function Foo(){} //构造函数

        var f1 = new Foo(); //实例

        console.log("5:"+(Foo===Foo.prototype.constructor));

        console.log("6.1:"+(f1.__proto__===Foo.prototype));

        console.log("7:"+(f1.constructor===Foo));

        console.log("8.1:"+(Number.prototype.__proto__===Object.prototype));

        console.log("8.2:"+(Boolean.prototype.__proto__===Object.prototype));

        console.log("8.3:"+(String.prototype.__proto__===Object.prototype));

        console.log("8.5:"+(Function.prototype.__proto__===Object.prototype));

        console.log("8.6:"+(Date.prototype.__proto__===Object.prototype));

        console.log("8.7:"+(Error.prototype.__proto__===Object.prototype));

        console.log("8.8:"+(Array.prototype.__proto__===Object.prototype));

        console.log("8.9:"+(RegExp.prototype.__proto__===Object.prototype));

        console.log("9:"+(Foo.__proto__===Function.prototype));

        var manfred = new Object();//实例对象

        console.log("10:"+(manfred.__proto__===Object.prototype));

        console.log("11:"+(Foo.prototype.__proto__===Object.prototype));

        //manfred为object构造函数产生，manfred.constructor指向function Object()构造函数

        console.log("12:"+(manfred.constructor.__proto__===Function.prototype));

        console.log("13:"+(manfred.constructor===Object.prototype.constructor));

        var hu = new Function();

        console.log("14:"+(hu.constructor.__proto__===Function.prototype));

        console.log("15:"+(hu.constructor===Function.prototype.constructor));

    </script>

</body>

</html>

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

原文地址：请点击这里

javascript--15条规则解析JavaScript对象布局（__proto__、prototype、constructor）的更多相关文章

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

    大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...

  2. 8条规则图解JavaScript原型链继承原理

    原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: ...

  3. Javascript技术之详尽解析event对象

    描述event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromEleme ...

  4. javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

    原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...

  5. JavaScript使用浏览器内置XML解析器解析DOM对象

    所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器.解析器把 XML 转换为 XML DOM 对象 (可通过 JavaScript 操作的对象). 一.获取DOM对象 XMLHttpReq ...

  6. JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)

    1. 构造函数原型对象:prototype ① 构造函数独立创建对象,消耗性能 function Person(name) { this.name = name; this.sayHello = fu ...

  7. 你不知道的JavaScript（上）this和对象原型（一）

    第一章  关于this 1.this 既不指向函数自身也不指向函数的词法作用域 2.this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用(调用位置). 第二章 this全面 ...

  8. javascript进击（五）JS对象

    JavaScript中是所有事物都是对象.JavaScript允许自定义对象. 对象是带有属性和方法的特殊数据类型. 访问对象的属性: 常见属性 访问对象的方法: 常用方法 (创建JavaScript ...

  9. (译) 《Javascript 24条最佳实践》

    (摘录) <Javascript 24条最佳实践> 自己一直偏向于实用主义,不是学院派,不是学究派,只讲究把东西能够很好的做出来,但经过一段时间的开发工作当自己总结出来一些东西时,觉得挺有 ...

随机推荐

  1. 【转】vc中使用SendMessage正确发送自定义消息的方法--不错

    原文网址:http://zhoumf1214.blog.163.com/blog/static/5241940200910265532959/ 最近在用VC2008做开发,后来由于要用到消息的发送,而 ...

  2. dedecms网站如何做在线订单功能

    做网站的时候经常会遇到做在线订单的这个功能,而且这个功能会在企业网站的建设中经常的遇到,今天51模板集就拿物流网的在线订单功能做一个详细的介绍. 第一步:自定义表单 打开后台:核心-->自定义表 ...

  3. del重复数

    楼主 发表于: 2010-06-21 11:46:31 本帖最后由 luckycynthia 于 2010-06-21 11:47:46 编辑 在抓取数据后对数据进行操作的途中,有时候会碰到重复数据, ...

  4. SRM 410(1-250pt, 1-500pt)

    DIV1 250pt 题意:对于图G,有一些点和边,点中有一些点称为特殊点.问在所有特殊点最终不能处于同一个联通块的条件下,最多能给在图G中添加多少条边. 解法:首先,对于图G,处理出它有哪些联通块, ...

  5. 来更新一篇blog吧

    最近做了一下hackerrank的20/20的比赛.平时都只能过2题,这周顺利地通过了四道题目竟然.当妄图冲击衬衫的时候,发现剩下三个题一点招数都没有,之后就跑去看了一下node.js了... 这次比 ...

  6. Django-RQ首页、文档和下载 - Django 和 RQ 集成 - 开源中国社区

    Django-RQ首页.文档和下载 - Django 和 RQ 集成 - 开源中国社区 Django-RQ 项目实现了 Django 框架和 RQ 消息队列之间的集成.

  7. hdoj 4324 Triangle LOVE【拓扑排序判断是否存在环】

    Triangle LOVE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  8. poj 1321 棋盘问题【dfs】

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 28308   Accepted: 13996 Descriptio ...

  9. 子元素margin-top属性传递给父元素的问题 转！

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  10. DevExpress LookUpEdit 下拉框基本操作

    <span style="font-size:14px;"> ArrayList list = new ArrayList(); //遍历皮肤,放到列表中 foreac ...