理解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代码编写的14条技巧
Jan 09 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
JavaScript交换两个变量方法实例
Nov 25 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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python设置检查点简单实现代码
2014/07/01 Python
python实现日常记账本小程序
2018/03/10 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
如何用SQL语句进行模糊查找
2015/09/25 面试题
行政助理岗位职责
2013/11/10 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
质量主管工作职责
2014/09/26 职场文书
告知书格式
2015/07/01 职场文书
运动会广播稿100字
2015/08/19 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis