深入理解JavaScript系列(15) 函数(Functions)

介绍
本章节我们要着重介绍的是一个非常常见的ECMAScript对象——函数(function),我们将详细讲解一下各种类型的函数是如何影响上下文的变量对象以及每个函数的作用域链都包含什么,以及回答诸如像下面这样的问题:下面声明的函数有什么区别么?(如果有,区别是什么)。
原文:

复制代码 代码如下:


var foo = function () {
...
};


平时的惯用方式:

复制代码 代码如下:


function foo() {
...
}


或者,下面的函数为什么要用括号括住?

复制代码 代码如下:


(function () {
...
})();


关于具体的介绍,早前面的12章变量对象和14章作用域链都有介绍,如果需要详细了解这些内容,请查询上述2个章节的详细内容。

但我们依然要一个一个分别看看,首先从函数的类型讲起:

函数类型
在ECMAScript 中有三种函数类型:函数声明,函数表达式和函数构造器创建的函数。每一种都有自己的特点。
函数声明
函数声明(缩写为FD)是这样一种函数:
有一个特定的名称
在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中
在进入上下文阶段创建
影响变量对象
以下面的方式声明

复制代码 代码如下:


function exampleFunc() {
...
}


这种函数类型的主要特点在于它们仅仅影响变量对象(即存储在上下文的VO中的变量对象)。该特点也解释了第二个重要点(它是变量对象特性的结果)——在代码执行阶段它们已经可用(因为FD在进入上下文阶段已经存在于VO中——代码执行之前)。
例如(函数在其声明之前被调用)

复制代码 代码如下:


foo();
function foo() {
alert('foo');
}


另外一个重点知识点是上述定义中的第二点——函数声明在源码中的位置:

复制代码 代码如下:


// 函数可以在如下地方声明:
// 1) 直接在全局上下文中
function globalFD() {
// 2) 或者在一个函数的函数体内
function innerFD() {}
}


只有这2个位置可以声明函数,也就是说:不可能在表达式位置或一个代码块中定义它。
另外一种可以取代函数声明的方式是函数表达式,解释如下:
函数表达式
函数表达式(缩写为FE)是这样一种函数:
在源码中须出现在表达式的位置
有可选的名称
不会影响变量对象
在代码执行阶段创建
这种函数类型的主要特点在于它在源码中总是处在表达式的位置。最简单的一个例子就是一个赋值声明:

复制代码 代码如下:


var foo = function () {
...
};


该例演示是让一个匿名函数表达式赋值给变量foo,然后该函数可以用foo这个名称进行访问——foo()。
同时和定义里描述的一样,函数表达式也可以拥有可选的名称:

复制代码 代码如下:


var foo = function _foo() {
...
};


需要注意的是,在外部FE通过变量“foo”来访问——foo(),而在函数内部(如递归调用),有可能使用名称“_foo”。
如果FE有一个名称,就很难与FD区分。但是,如果你明白定义,区分起来就简单明了:FE总是处在表达式的位置。在下面的例子中我们可以看到各种ECMAScript 表达式:
// 圆括号(分组操作符)内只能是表达式
(function foo() {});
// 在数组初始化器内只能是表达式
[function bar() {}];
// 逗号也只能操作表达式
1, function baz() {};
表达式定义里说明:FE只能在代码执行阶段创建而且不存在于变量对象中,让我们来看一个示例行为:

复制代码 代码如下:


// FE在定义阶段之前不可用(因为它是在代码执行阶段创建)
alert(foo); // "foo" 未定义
(function foo() {});
// 定义阶段之后也不可用,因为他不在变量对象VO中
alert(foo); // "foo" 未定义
相当一部分问题出现了,我们为什么需要函数表达式?答案很明显——在表达式中使用它们,”不会污染”变量对象。最简单的例子是将一个函数作为参数传递给其它函数。
function foo(callback) {
callback();
}
foo(function bar() {
alert('foo.bar');
});
foo(function baz() {
alert('foo.baz');
});


在上述例子里,FE赋值给了一个变量(也就是参数),函数将该表达式保存在内存中,并通过变量名来访问(因为变量影响变量对象),如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjzfw.html