理解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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
微信小程序之事件交互操作实例分析
Dec 03 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
js实现3D旋转相册
Aug 02 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP 事件机制(2)
2011/03/23 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
js常用DOM方法详解
2017/02/04 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
夜大自我鉴定
2013/10/31 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
催款律师函范文
2015/05/27 职场文书
老人院义工活动感想
2015/08/07 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python