理解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实现仿QQ秀换装效果的方法
Mar 04 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
javascript每日必学之继承
Feb 23 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
理解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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
浅谈Python中的数据类型
2015/05/05 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python常见排序算法基础教程
2017/04/13 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python学习开发mock接口
2019/04/28 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
2014年情人节活动方案
2014/02/16 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
学校社会实践活动总结
2014/07/03 职场文书
体育课外活动总结
2014/07/08 职场文书
调研座谈会发言材料
2014/08/23 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL