理解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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
JS轮播图的实现方法
Aug 24 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
javascript实现颜色渐变的方法
2013/10/30 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
如何写毕业求职自荐信
2013/11/06 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
代理人委托书
2014/08/01 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2014年药店工作总结
2014/11/20 职场文书
入党介绍人意见范文
2015/06/01 职场文书
高中数学教学反思范文
2016/02/18 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL