理解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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
vue环境搭建简单教程
Nov 07 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
理解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/03/08 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
代理人委托书
2014/08/01 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
爱的承诺书
2015/01/20 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Python Django模型详解
2021/10/05 Python
python三子棋游戏
2022/05/04 Python