理解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 相关文章推荐
extjs 04_grid 单击事件新发现
Nov 27 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
JavaScript知识点整理
Dec 09 Javascript
封装属于自己的JS组件
Jan 27 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
利用PM2部署node.js项目的方法教程
May 10 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获取windows登录用户名的方法
2014/06/24 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
简单谈谈python的反射机制
2016/06/28 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
校园门卫岗位职责
2013/12/09 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
开学典礼策划方案
2014/05/28 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
英语导游欢迎词
2015/09/30 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
教师远程研修感悟
2015/11/18 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS