大家都说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对象之间的关系已经了如指掌了,确实一开始我也让这货搞得头晕晕的,但是画出这张图之后已经觉得没什么了。大家可以自己动手画一下。

原文地址:请点击这里

总结(补充):

  1. 普通函数的原型是由Object()构造器构造的,同Object.prototype一样是Object()构造器的一个实例
  2. 普通函数是Function()构造器构造的,同Function.prototype一样是Function()构造器的一个实例
  3. 内部原型链_proto_属性是为了实现继承而存在的,这样,我们可以处于任何目的来修改constructor属性,而不用担心实例与父类的一致性。

15条规则解析JavaScript对象布局(__proto__、prototype、constructor)的更多相关文章

  1. javascript--15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

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

  2. JavaScript对象创建,继承

    创建对象 在JS中创建对象有很多方式,第一种: var obj = new Object(); 第二种方式: var obj1 = {};//对象直面量 第三种方式:工厂模式 function Per ...

  3. JavaScript对象原型写法区别

        体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...

  4. 面向面试编程——javascript对象的几种创建方式

    javascript对象的几种创建方式 总共有以下几个模式: 1.工厂模式 2.构造函数模式 3.原型模式 4.混合构造函数和原型模式 5.动态原型模式 6.寄生构造函数模式 7.稳妥构造函数模式 1 ...

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

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

  6. javascript对象转化为基本数据类型规则

    原文:Object-to-Primitive Conversions in JavaScript 对象转化为基础数据类型,其实最终都是用调用对象自带的valueOf和toString两个方法之一并获得 ...

  7. web前端-雅虎34条规则优化

    1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是 ...

  8. 《C++编程规范:101条规则、准则与最佳实践》学习笔记

    转载:http://dsqiu.iteye.com/blog/1688217 组织和策略问题 0. 不要为小事斤斤计较.(或者说是:知道什么东西不需要标准化) 无需在多个项目或者整个公司范围内强制实施 ...

  9. 第六章:Javascript对象

    对象是javascript的基本数据类型.对象是一种复合值.它将很多值(原始值 或者其他对象)聚合在一起.可通过名字访问这些值.对象也可以看做是属性的无序集合,每个属性都有一个名/值.属性名是字符串, ...

随机推荐

  1. git远程库GitHub

    首先,注册一个GitHub(github.com)帐号,免费获得Git远程仓库 由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用 ...

  2. Python 环境搭建,开发工具,基本语法

    python环境 https://www.python.org/downloads/ 现在pthon有两个版本 一个是3.5系列的 , 一个是2.7系列的.建议用3.5版本的 开发工具 PyCharm ...

  3. 解读sencha touch移动框架的核心架构(一)

    sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...

  4. Solr Python API : SolrCloudpy 与 Pysolr 的 对比

    http://ae.yyuap.com/pages/viewpage.action?pageId=920314 SolrCloudpy文档:http://solrcloudpy.github.io/s ...

  5. LDA和PLSA

    看了<LDA数学八卦>和July的博客,里面涉及到好多公式推导...感觉好复杂,于是记录一些重点简洁的东西,忽略大批量铺垫,直接回答LDA和PLSA是区别: 在pLSA模型中,我们按照如下 ...

  6. Javascript高级程序设计——在HTML中使用Javascript

    <script>元素 向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性: async:可选.表示应该 ...

  7. 【C语言学习笔记】存储类、链接和内存管理

    因为对内存管理部分一直没有很清楚的思路,所以一直在找资料想系统看一下这部分的内容.在C primer plus里看到了这一章,虽然大多都是心知肚明的东西,但是还是很多概念性系统性的东西让我眼前一亮,把 ...

  8. java 堆栈

    堆栈(stack).位于通用RAM中,但通过它的“堆栈指针”可以从处理器哪里获得支持.堆栈指针若向下移动,则分配新的内存:若向上移动,则释放那些 内存.这是一种快速有效的分配存储方法,仅次于寄存器. ...

  9. AE笔记

    我想做一个好玩的视频,需要用到AE,写点东西锻炼语言能力,视频教程后续录制到时放链接. 一.合成 拖进项目的视频要新建合成才能加以编辑,新建合成很简单,拖拽你的视频向下到一个类似相片的图标上面就新建成 ...

  10. SmartImageView&amp;常见的开源代码

    1)说明: 该控件实现图片的显示----网络路径也可以显示出来---加载完成之后 就可以 缓存到内存里面!