理解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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JavaScript表单验证开发
Nov 23 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
通过文字传递创建的图形按钮
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python字符串循环左移
2019/03/08 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python字典改变value值方法总结
2019/06/21 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
节能标语大全
2014/06/21 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
部门2014年度工作总结
2014/11/12 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
立项申请报告范本
2015/05/15 职场文书
重温入党誓词主持词
2015/06/29 职场文书
战友聚会致辞
2015/07/28 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Python学习之异常中的finally使用详解
2022/03/16 Python
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电