理解Javascript_08_函数对象

 更新时间:2010年10月15日 23:55:31   作者:  
如果你无法理解博文在讲什么,请回顾前面的系列博文。文章比较深入,如有不对之处,望请指正,谢谢。
函数对象
首先,大家得明确一个概念:函数就是对象,代表函数的对象就是函数对象。既然是对象,那它又是被谁构造出来的呢?下面我们来看一段描述: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的构造过程:

来自于一个整体的分析图:

图片本身已经能解释很多很多的问题了,结合前面instanceof原理,对象构造原理,原型链原理,自已去体会吧,我就不多说什么了。

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


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

相关文章

  • 按键测试,支持像 Ctrl+Alt+Shift+T 的组合键

    按键测试,支持像 Ctrl+Alt+Shift+T 的组合键

    按键测试,支持像 Ctrl+Alt+Shift+T 的组合键...
    2006-10-10
  • 超详细的javascript数组方法汇总

    超详细的javascript数组方法汇总

    这篇文章主要对javascript的数组方法进行了详细的汇总,包括了最常用的的数组方法,还有扩展方法,很全面,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Bootstrap精简教程

    Bootstrap精简教程

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web开发更加快捷。本文给大家分享Bootstrap精简教程,对Bootstrap精简教程感兴趣的朋友一起学习
    2015-11-11
  • javascript中去除数组重复元素的实现方法【实例】

    javascript中去除数组重复元素的实现方法【实例】

    下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-04-04
  • js 奇葩技巧之隐藏代码

    js 奇葩技巧之隐藏代码

    这篇文章主要介绍了js 奇葩技巧之隐藏代码,通过代码示例展示了隐藏代码的过程,需要的朋友可以参考下
    2017-08-08
  • IE8 内存泄露(内存一直增长 )的原因及解决办法

    IE8 内存泄露(内存一直增长 )的原因及解决办法

    最近开发的时候对页面使用了定时的局部更新,结果在ie6,7和Firefox下,一切正常,而在ie8下过上几个小时就浏览器就崩溃了,显示是内存溢出,下面由脚本之家小编给大家介绍ie8下内存一直增长内存泄漏的原因及解决办法,需要的朋友一起学习吧
    2016-04-04
  • javascript 折半查找字符在数组中的位置(有序列表)

    javascript 折半查找字符在数组中的位置(有序列表)

    折半查找字符在数组中的位置(有序列表),需要的朋友可以参考下。
    2010-12-12
  • 微信小程序开发常用功能点与使用方法总结

    微信小程序开发常用功能点与使用方法总结

    最近收集了一些小程序开发中常用到的知识点,记录一下,所以下面这篇文章主要给大家介绍了关于微信小程序开发常用功能点与使用方法的相关资料,需要的朋友可以参考下
    2021-10-10
  • js放大镜放大购物图片效果

    js放大镜放大购物图片效果

    这篇文章主要为大家详细介绍了基于JavaScript实现放大镜放大购物图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 浅聊一下为什么能用RxJS取代Redux

    浅聊一下为什么能用RxJS取代Redux

    本文我们将和大家浅聊一下为什么能用RxJS取代Redux,RxJS 在现在的前端用比较少,但是 RxJS 作为响应式和函数式编程的集大成者,似乎被前端开发者遗忘,可能是学习难度大,可能是有更加方便的解决方案,需要的朋友可以参考下
    2024-02-02

最新评论