理解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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
javascript常用的正则表达式实例
May 15 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php图像处理类实例
2015/07/28 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP模块化安装教程
2016/06/01 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
js实现内置计时器
2019/12/16 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python实现图书借阅系统
2019/02/20 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
自我评价范文分享
2014/01/04 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
中秋节主持词
2014/04/02 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书