理解Javascript_09_Function与Object


Posted in Javascript onOctober 16, 2010

注:理论过于深入,本人不改保证所有的理论都是正确的,但经过多方测试还未发现实际代码与理论冲突的问题。如有错误,望高人指点!

Function

首先回顾一下函数对象的概念,函数就是对象,代表函数的对象就是函数对象。所有的函数对象是被Function这个函数对象构造出来的。也就是说,Function是最顶层的构造器。它构造了系统中所有的对象,包括用户自定义对象,系统内置对象,甚至包括它自已。这也表明Function具有自举性(自已构造自己的能力)。这也间接决定了Function的[[call]]和[[constructor]]逻辑相同。

function Foo() {}; 
var foo = new Foo(); 
//Foo为foo的构造函数 
alert(foo instanceof Foo); // true 
//但是Function并不是foo的构造函数 
alert(foo instanceof Function); // false 
//Function为Foo的构造函数 
alert(Foo instanceof Function);//true

上面的代码解释了foo和其构造函数Foo和Foo的构造函数Function的关系。(具体原理请参见Function与Object的内存关系图)
Object 

对于Object它是最顶层的对象,所有的对象都将继承Object的原型,但是你也要明确的知道Object也是一个函数对象,所以说Object是被Function构造出来的。(关于Object并没有太多的理论)

Function与Object
这是本文的重点,非常重要!

alert(Function instanceof Function);//true 
alert(Function instanceof Object);//true 
alert(Object instanceof Function);//true 
function Foo() {}; 
var foo = new Foo(); 
alert(foo instanceof Foo); // true 
alert(foo instanceof Function); // false 
alert(foo instanceof Object); // true 
alert(Foo instanceof Function); // true 
alert(Foo instanceof Object); // true

你能理解这些答案吗?那恭喜你,Javascript语言的本质你已经理解了。
那么让我们来看一下Object与Function实际的关系吧:
理解Javascript_09_Function与Object
在你看图之前,请先阅读函数对象与instanceof原理两篇文章,要不然内存图很难理解。

在这,我对内存图做一点说明:在函数对象一文中提到了函数对象的构造过程,在本文中提到Function为自举性的,所以说函数对象Foo的构造过程和函数对象Function的构造过程是一样的。所以在图中给于高亮显示,我用'|'来分隔来表示它们的构造过程相同。根据instanceof的理论,和内存图,可以将上面的语句都推导出正确的结果。在此我们不一一讲述了,读者自已体会吧。

如果你不能理解这张复杂的内存图的话,可以看下面的说明图来帮助理解:
理解Javascript_09_Function与Object
注:代码的实际执行流程并不完全像这张图上描述的那样,也就是说这张图是有问题的(可以说是错误的),它无法解释为什么Function instanceof Function 为true。 但是它易于理解Function与Object的关系。

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
javascript中clone对象详解
Dec 03 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
理解Javascript_08_函数对象
Oct 15 #Javascript
javascript instanceof 内部机制探析
Oct 15 #Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 #Javascript
JavaScript 对象模型 执行模型
Oct 15 #Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 #Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 #Javascript
JavaScript访问样式表代码
Oct 15 #Javascript
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python调用.NET库的方法步骤
2019/12/27 Python
利用python爬取有道词典的方法
2020/12/08 Python
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
super关键字的用法
2012/04/10 面试题
一名女生的自荐信
2013/12/08 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书