理解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 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
javascript中var的重要性分析
Feb 11 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
Javascript 继承机制实例
2009/08/12 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
javascript帧动画(实例讲解)
2017/09/02 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python在线运行代码助手
2016/07/15 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
英语商务邀请函范文
2014/01/16 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
电影建国大业观后感
2015/06/01 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Python绘画好看的星空图
2022/03/17 Python
Go并发4种方法简明讲解
2022/04/06 Golang