理解Javascript_08_函数对象


Posted in Javascript onOctober 15, 2010

函数对象
首先,大家得明确一个概念:函数就是对象,代表函数的对象就是函数对象。既然是对象,那它又是被谁构造出来的呢?下面我们来看一段描述:JavaScript代码中定义函数,或者调用Function创建函数时,最终都会以类似这样的形式调用Function函数:var newFun=Function(funArgs, funBody); 。由此可知函数对象是由Function这个函数对象构造出来的。
注:Function对象本身也是一个函数,因此它也一个函数对象。关于Function的深入理解,请见后续博文。
正面我们来看一段代码:

//定义方式一 
function func(x) { 
alert(x); 
} 
//定义方式二 
var func = function(x) { 
alert(x); 
}; 
//实际执行 
var func = new Function(“x”, “alert(x);”);

通过上面的代码可知,函数func无非是由Function对象接收两个参数后构造出来的而矣!

注:关于定义方式一与定义方式二的区别,请见后续博文

函数对象的创建过程

函数对象详细创建步骤如下:

1. 创建一个build-in object对象fn

2. 将fn的内部[[Prototype]]设为Function.prototype
3. 设置内部的[[Call]]属性,它是内部实现的一个方法,处理函数调用的逻辑。(简单的理解为调用函数体)

4. 设置内部的[[Construct]]属性,它是内部实现的一个方法,处理逻辑参考对象创建过程。(简单的理解为创建对象《理解Javascript_06_理解对象的创建过程》一文)

5. 设置fn.length为funArgs.length,如果函数没有参数,则将fn.length设置为0
6. 使用new Object()同样的逻辑创建一个Object对象fnProto
7. 将fnProto.constructor设为fn
8. 将fn.prototype设为fnProto
9. 返回fn

步骤1跟步骤6的区别为,步骤1只是创建内部用来实现Object对象的数据结构(build-in object structure),并完成内部必要的初始化工作,但它的[[Prototype]]、[[Call]]、[[Construct]]等属性应当为 null或者内部初始化值,即我们可以理解为不指向任何对象(对[[Prototype]]这样的属性而言),或者不包含任何处理(对 [[Call]]、[[Construct]]这样的方法而言)。步骤6则将按照《理解Javascript_06_理解对象的创建过程》创建一个新的对象,它的 [[Prototype]]等被设置了。
从上面的处理步骤可以了解,任何时候我们定义一个函数,它的prototype是一个Object实例,这样默认情况下我们创建自定义函数的实例对象时,它们的Prototype链将指向Object.prototype。

注:Function一个特殊的地方,是它的[[Call]]和[[Construct]]处理逻辑一样。深层次的原因将在后续博文中介绍。

下面我们写一些用例脚本来测试一下上面的理论:

function Animal(){ 
} 
alert(Animal.length);//0 var dog = new Animal();

这个JS证明了步骤5的正确性。最后,还是来看一下函数对象的内存图,简单起见,内存图只描述了Animal的构造过程:
理解Javascript_08_函数对象
来自于一个整体的分析图:
理解Javascript_08_函数对象
图片本身已经能解释很多很多的问题了,结合前面instanceof原理,对象构造原理,原型链原理,自已去体会吧,我就不多说什么了。

其实上Function对象是一个很奇妙的对象,它与Object的关系更是扑朔迷离,我将在《理解Javascript_09_Function与Object》中解释这一切。

最后的声明:理论过于复杂,我不改保证其正确性。但经过多方的测试,还未发现理论与实际冲突的地方。

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
vue 实现走马灯效果
Oct 28 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
canvas绘制折线路径动画实现
May 12 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
IE下js调试工具Companion.JS
Oct 15 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
处理Python中的URLError异常的方法
2015/04/30 Python
python 读写中文json的实例详解
2017/10/29 Python
tornado 多进程模式解析
2018/01/15 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python 绘制场景热力图的示例
2020/09/23 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
网络管理员岗位职责
2014/03/17 职场文书
党支部换届选举方案
2014/05/08 职场文书
党员公开承诺书内容
2014/05/20 职场文书
海洋科学专业求职信
2014/08/10 职场文书
房地产端午节活动方案
2014/08/24 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年人事科工作总结
2014/11/19 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Python字符串常规操作小结
2022/04/03 Python