理解Javascript_08_函数对象

函数对象
首先，大家得明确一个概念：函数就是对象,代表函数的对象就是函数对象。既然是对象，那它又是被谁构造出来的呢？下面我们来看一段描述: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》中解释这一切。

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

赞 (0)

相关推荐

  • 理解Javascript_15_作用域分配与变量访问规则,再送个闭包

    理解Javascript_15_作用域分配与变量访问规则,再送个闭包

    作用域分配与变量访问规则 在 ECMAScript 中,函数也是对象.函数对象在变量实例化过程中会根据函数声明来创建,或者是在计算函数表达式或调用 Function 构造函数时创建.(关于'函数对象'请见<理解Javascript_08_函数对象>).每个函数对象都有一个内部的 [[scope]] 属性,这个属性也由对象列表(链)组成.这个内部的[[scope]] 属性引用的就是创建它们的执行环境的作用域链,同时,当前执行环境的活动对象被添加到该对象列表的顶部.当我们在函数内部访问变量时,其实

  • 理解Javascript_05_原型继承原理

    理解Javascript_05_原型继承原理

    prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: 复制代码 代码如下: //Animal构造函数 function Animal(name){ this.name = name; } //Animal原型对象 Animal.prototype = { id:"Animal", sleep:function(){ alert("sleep"); } } var dog = new Animal("旺才");

  • 理解Javascript_11_constructor实现原理

    理解Javascript_11_constructor实现原理

    constructor是什么 简单的理解,constructor指的就是对象的构造函数.请看如下示例: 复制代码 代码如下: function Foo(){}; var foo = new Foo(); alert(foo.constructor);//Foo alert(Foo.constructor);//Function alert(Object.constructor);//Function alert(Function.constructor);//Function 对于foo.con

  • 理解Javascript_06_理解对象的创建过程

    理解Javascript_06_理解对象的创建过程

    简单的代码 我们先来看一段简单的代码: 复制代码 代码如下: function HumanCloning(){ } HumanCloning.prototype ={ name:'笨蛋的座右铭' } var clone01 = new HumanCloning(); alert(clone01.name);//'笨蛋的座右铭' alert(clone01 instanceof HumanCloning);//true HumanCloning.prototype = {}; alert(clon

  • 理解Javascript_12_执行模型浅析

    理解Javascript_12_执行模型浅析

    简单的开始 简单的代码: 复制代码 代码如下: <script type="text/javascript" src="xxx.js"></script> <script type="text/javascript"> var i = 10; function say(msg){ alert(msg); } </script> <script type="text/javascrip

  • 理解Javascript_07_理解instanceof实现原理

    理解Javascript_07_理解instanceof实现原理

    那么instanceof的这种行为到底是如何实现的呢,现在让我们揭开instanceof背后的迷雾. instanceof原理 照惯例,我们先来看一段代码: 复制代码 代码如下: function Cat(){} Cat.prototype = {} function Dog(){} Dog.prototype ={} var dog1 = new Dog(); alert(dog1 instanceof Dog);//true alert(dog1 instanceof Object);//t

  • 理解Javascript_10_对象模型

    理解Javascript_10_对象模型

    对象模型 红色虚线表示隐式Prototype链. 这张对象模型图中包含了太多东西,不少地方需要仔细体会,可以写些测试代码进行验证.彻底理解了这张图,对JavaScript语言的了解也就差不多了.下面是一些补充说明: 1. 图中有好几个地方提到build-in Function constructor,这是同一个对象,可以测试验证: 复制代码 代码如下: //Passed in FF2.0, IE7, Opera9.25, Safari3.0.4 Function==Function.constr

  • 理解Javascript_13_执行模型详解

    函数执行环境 简单的代码: 复制代码 代码如下: function say(msg,other){ var str = "nobody say:"; this.name = '笨蛋的座右铭'; function method(){};//var method = function(){}; alert(str+msg); } say('hello world'); alert(name);//笨蛋的座右铭 当调用say方法时,第一步是创建其执行环境,在创建执行环境的过程中,会按照定义的

  • 理解Javascript_09_Function与Object

    理解Javascript_09_Function与Object

    注:理论过于深入,本人不改保证所有的理论都是正确的,但经过多方测试还未发现实际代码与理论冲突的问题.如有错误,望高人指点! Function 首先回顾一下函数对象的概念,函数就是对象,代表函数的对象就是函数对象.所有的函数对象是被Function这个函数对象构造出来的.也就是说,Function是最顶层的构造器.它构造了系统中所有的对象,包括用户自定义对象,系统内置对象,甚至包括它自已.这也表明Function具有自举性(自已构造自己的能力).这也间接决定了Function的[[call]]和[

  • 理解Javascript_14_函数形式参数与arguments

    理解Javascript_14_函数形式参数与arguments

    注:在阅读本博文前请先阅读<理解javascript_13_执行模型详解> 注:本文的部分内容是自已的一些推论,并无官文文档作依据,如有错误之后,还望指正. 生涩的代码 我们先来看一段比较生涩的代码: 复制代码 代码如下: function say(msg,other,garbage){ alert(arguments[1]);//world var other = 'nice to meet you!'; var msg; alert(arguments.length); alert(msg

  • 理解Javascript_03_javascript全局观

    理解Javascript_03_javascript全局观

    先来看一张图吧: 解释一下: 核心(ECMAScript):定义了脚本语言的所有对象,属性和方法 文档对象模型(DOM):HTML和XML应用程序接口 浏览器对象模型(BOM):对浏览器窗口进行访问操作 现在来具体的讲一个各个成分: 关于ECMAScript ECMAScript的工作是定义语法和对象,从最基本的数据类型.条件语句.关键字.保留字到异常处理和对象定义都是它的范畴. 在ECMAScript范畴内定义的对象也叫做原生对象. 其实上它就是一套定义了语法规则的接口,然后由不同的浏览器对其

  • 理解Javascript_02_理解undefined和null

    理解Javascript_02_理解undefined和null

    来自普遍的回答: 其实在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的. 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null. 值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的,通过下列代码可以验证这一结论: alert(undefined == null); //true 尽管这两个值相等,但它们的含义不同. undefined 是声明了变量但未对其初始化时赋予该变量的值,n

  • 理解Javascript_01_理解内存分配原理分析

    理解Javascript_01_理解内存分配原理分析

    原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值指的就是代表原始数据类型(基本数据类型)的值,即Undefined,Null,Number,String,Boolean类型所表示的值. 引用值指的就是复合数据类型的值,即Object,Function,Array,以及自定义对象,等等 栈和堆 与原始值与引用值对应存在两种结构的内存即栈和堆 栈是一种后进先出的数据结构,在javascript中可以通过Array来模拟栈的行为 复制代码 代码如下: va

随机推荐