理解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 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Angular性能优化之第三方组件和懒加载技术
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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
简单了解什么是神经网络
2017/12/23 Python
mac下如何将python2.7改为python3
2018/07/13 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
班主任工作经验材料
2014/02/02 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
小学生安全演讲稿
2014/04/25 职场文书
道德之星事迹材料
2014/05/03 职场文书
社区服务标语
2014/07/01 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Nginx反向代理、重定向
2022/04/13 Servers
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers