`

Function 和Object 的关系<三>

    博客分类:
  • js
 
阅读更多

http://www.cnblogs.com/tarol/p/4660866.html

 

ECMAScript规定了两个特殊的内置对象:Object和Function。他们的特殊性在于,他们本身既是对象又是函数,而他们同时也是对象和函数的构造器。这种自己生自己的逻辑显然违反人性,如果还停留在类的继承的思想上,那么更加无法理解。

  然而ECMAScript是基于原型链的,所以忘掉类的继承,从原型链入手:原型链是对象的集合,每个对象都有内部属性[[Prototype]](注1)指向另一个对象;当访问对象某一属性的时候,如果此属性不为此对象的自身属性(注2),则继续去[[Prototype]]指向的对象上查找此属性。[[Prototype]]形成的对象的链式集合即原型链。这里可以得出:原型链上的所有元素都是对象。

  ECMASciprt规定:原型链必须是有限长度(注3),而且终点必须是null。现在终点是唯一的,那么原型链上倒数第二个元素是不是唯一的呢?ECMAScript没有规定,但从实现上来看,是唯一的。因为原型链上所有的元素都是对象,所以倒数第二个元素应该是所有对象的基础对象。这个对象在实现中只给出一个引用,就是Object.prototype。这里可以得出:原型链上有两个元素是固定的,终点是null,倒数第二的元素是Object.prototype指向的对象(注4)。

  那么倒数第三个元素是不是固定的呢?不是。从倒数第二个元素是Object.prototype来看,通过{}字面量和new Object()创建的对象都在倒数第三这个位置,即POJO都在倒数第三。另外还有两个特例,一个是除内置函数之外的内置对象,如Math、JSON;一个是除Object之外的内置函数的prototype属性指向的对象,如Function.prototype。这里可以得出:原型链上倒数第三的元素一般是POJO+Math/JSON+(Function/Array/String/Boolean/Number/Date/RegExp/Error).prototype。

  倒数第三的位置出现了这么多的prototype,那么倒数第四的位置就好推测了,所有除Object之外的内置函数作为构造器调用(注5)时生成的实例对象都在倒数第四。其中需要注意的是,所有的内置函数本身是Function作为构造器调用生成的实例对象,所以都在这个位置。这里可以得出:原型链上倒数第四的元素一般是(Function/Array/String/Boolean/Number/Date/RegExp/Error)实例,其中包括(Object/Function/Array/String/Boolean/Number/Date/RegExp/Error),注意这个括号里面Object回来了。

  原型链基本结构如下图:

从图上看来:

  1. array等非POJO对象在原型链上和他们的构造器属于同一级别
  2. POJO在原型链上比他的构造器还靠后一个级别

参考文档:ES5

注:

  1. 内部属性是不开放给JS访问的属性,但现代浏览器已经可以通过__proto__属性访问和设置[[Prototype]]
  2. own property,即直接设置在此对象上的属性
  3. 执行以下代码感受下:
var a = {};
a.__proto__ = a;

      4.Object.prototype和基础对象的关系好比快捷方式和应用程序,本身没有任何关系,现在可以指向基础对象,以后也可以指向其他对象。当然原则上是不允许的,基础对象没有引用内存会被回收,所以ECMAScript规定Object下的prototype属性的writable和configuration特性都是false(特性的问题以后另起一篇)

      5.假设func为一个函数,func()即作为函数调用(调用内部函数属性[[Call]]),new func()即作为构造器调用(调用内部函数属性[[Construct]])

 

 

http://www.cnblogs.com/tarol/p/4671321.html

  • 大小: 37.3 KB
分享到:
评论

相关推荐

    html标签总结

    - **示例**:`&lt;table&gt;&lt;caption&gt;员工名单&lt;/caption&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Age&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;John Doe&lt;/td&gt;&lt;td&gt;30&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;` #### 居中文本:`&lt;center&gt;` - **作用**:定义居中文本。该标签已废弃,建议...

    ASP+ACCESS毕业设计 网上购物系统 论文+源码

    文中着重论述了该系统的功能与实现、数据流程与存储、网上购物、后台管理等&lt;br&gt;经分析,使用Microsoft公司的ASP(Active Server Pages)和相关网页开发工具,利用微软提供的IIS建立运行环境,再利用ODBC(数据源)...

    理解Javascript Function与Object

    在这篇文章中,我们将深入探讨Function和Object的关系,了解它们之间的联系和区别。 Function:函数对象 ---------------- 在JavaScript中,函数是一个对象,它代表了函数的概念。所有的函数对象都是由Function这...

    javaScript-javascript-初级到高级-笔记.docx

    JavaScript由三大部分构成:基础语法、DOM(Document Object Model)和BOM(Browser Object Model)。基础语法包括变量、数据类型、运算符、流程控制等基本概念。DOM是HTML和XML文档的抽象表示,它允许通过编程方式...

    XML轻松学习手册--XML实例解析之二

    通过使用`&lt;object&gt;`标签和JavaScript,可以实现在网页上动态加载和展示XML文件的内容。此外,通过添加导航按钮和相关的JavaScript函数,可以进一步提升用户体验,使得用户能够在网页上方便地浏览和切换XML数据。这种...

    Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.pdf

    题目中提到了`&lt;link&gt;`标签,用于引入外部样式表文件,`type="text/css"`指定样式表类型,`rel="stylesheet"`定义链接关系。CSS属性如`float`用于浮动元素,`display: grid`创建CSS网格布局,`list-style-image`设置...

    CSS-HTML-JS-XML的概念及之间的关系

    4. **XML与其他三种语言**:虽然XML主要用于数据交换,但它也可以和其他三种语言结合起来使用。例如,可以使用JavaScript处理XML数据,将其呈现为动态的HTML内容。 总之,HTML、CSS、JavaScript和XML在网站开发中...

    组织架构代码,点击伸缩

    在这个结构中,子部门或小组被嵌套在父部门的`&lt;ul&gt;`元素内,这样我们可以很方便地进行折叠和展开操作。 接下来,引入jQuery库,这里使用的是`jquery-1.8.3.min.js`。在HTML文档的`&lt;head&gt;`部分添加引用: ```html ...

    j2ee maven 结合gulp构建工具构建 war 自动刷新浏览器缓存

    它通过POM(Project Object Model)文件来配置项目的依赖关系和构建过程。Maven拥有强大的生命周期和插件体系,可以用于编译、测试、打包、部署等多种任务,简化了项目的构建流程。 Gulp则是一个基于Node.js的流式...

    delphi编译错误.txt

    15. **Bad global symbol definition: `&lt;Name&gt;` in object file `&lt;Filename&gt;`** - **含义**: 对象文件 `&lt;Filename&gt;` 中的全局符号 `&lt;Name&gt;` 定义不正确。 - **解决办法**: 检查和修正全局符号定义。 16. **Bad ...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    #PCDATA, element-name 包含文本和其它子元素 &lt;MYFILE(#PCDTATA,TITLE)&gt; MYFILE元素必须包含文本和TITLE子元素 , 使用逗号分隔排序 &lt;MYFILE (TITLE,AUTHOR,EMAIL)&gt; MYFILE元素必须依次包含TITILE,AUTHOR,EMAIL三...

    表格合并table单元合并

    例如,`&lt;td rowspan="5"&gt;11&lt;/td&gt;`意味着该单元格会跨越5行。 ##### 2. JavaScript逻辑 在JavaScript部分,代码首先定义了两个对象`o2`和`o`,以及一个二维数组`tblStr`来存储表格数据。 ```javascript o = {}; o[...

    基于JavaScript的树形菜单

    节点之间通过父节点和子节点的关系连接。在HTML中,通常使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建基础的结构,如下所示: ```html &lt;ul id="treeMenu"&gt; &lt;li&gt;父节点1 &lt;ul&gt; &lt;li&gt;子节点1.1&lt;/li&gt; &lt;li&gt;子节点1.2&lt;/li&gt; &lt;/ul&gt; &lt;/...

    js树形菜单集合~~~~~~~~~~~~~~

    在JavaScript中,我们通常使用DOM(Document Object Model)对象来创建和操作这些节点。 二、HTML基础结构 首先,我们需要在HTML中定义基本的结构,这通常包括一个包含多个`&lt;li&gt;`元素的`&lt;ul&gt;`列表,其中每个`&lt;li&gt;`...

    JSON无限折叠菜单特效.zip

    在创建无限折叠菜单时,我们通常会使用`&lt;ul&gt;`和`&lt;li&gt;`元素来表示菜单的层级关系,`&lt;a&gt;`标签则作为点击触发展开/折叠动作的元素。例如: ```html &lt;ul class="menu"&gt; &lt;li&gt; &lt;a href="#"&gt;菜单1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a ...

    w3school(网页完整版)

    例如,`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`是基本结构标签,`&lt;h1&gt;`到`&lt;h6&gt;`定义标题,`&lt;p&gt;`表示段落,`&lt;a&gt;`用于超链接,`&lt;img&gt;`插入图片。HTML5新增了多媒体支持,如`&lt;video&gt;`和`&lt;audio&gt;`标签。 2. **CSS (Cascading ...

    JavaScript验证教程

    例如,`&lt;head&gt;`和`&lt;body&gt;`元素是`&lt;html&gt;`的直接子节点。 ##### 1.2 使用JavaScript获取HTML元素 在JavaScript中,可以通过`document`对象来访问HTML文档中的元素。常用的获取元素的方法包括: - `getElementById...

    sap 操作XML(自己的笔记)

    - **基于DOM (Document Object Model) 的解析**:这种方式会将整个XML文档加载到内存中,然后通过DOM API进行访问和修改。适合处理较小的XML文档。 - **基于事件的解析**:这种方式采用事件驱动的方式,逐行读取XML...

    freemarker总结

    &lt;#list ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] as x&gt; ${x_index + 1}.${x}&lt;#if x_has_next&gt;,&lt;/if&gt; &lt;#if x="星期四"&gt;&lt;#break&gt;&lt;/#if&gt; &lt;/#list&gt; &lt;p&gt;We have these animals: ...

    XML+JS实现省市县区无刷新联动查询

    XML文件应包含一个顶级元素,例如`&lt;address&gt;`,并在其下按层级关系设置`&lt;province&gt;`, `&lt;city&gt;`, `&lt;county&gt;`元素,每个元素内存储对应地区的名称。例如: ```xml &lt;address&gt; &lt;province id="1"&gt; &lt;name&gt;北京市&lt;/name&gt;...

Global site tag (gtag.js) - Google Analytics