js高程读书笔记 第七章 函数表达式

[TOC]

本章内容

  • 函数表达式的特征
  • 使用函数实现递归
  • 使用闭包定义私有变量

函数表达式是JavaScript种一个强大又令人困惑的特性。
定义函数的方式有两种:函数声明和函数表达式

1
2
3
4
5
function functionName(arg0, arg1, arg2){
//函数体
}
//只在Firefox、safari、chrome和opera中有效
console.log(functionNmae.name);//"functionNmae"

函数声明:重要特性——函数声明提升,在执行代码之前会先读取函数声明。

1
2
3
4
sayHi();
function sayHi(){
console.log("Hi!");
}

第二种创建函数的方式是使用函数表达式。

1
2
3
var functionName = function(arg0, arg1, arg2){
//函数体
};//这里有分号

这种情况下创建的函数叫做匿名函数(anonymous function),因为function关键字后面没有标识符(又可以叫lambda函数),所以匿名函数的name属性是空字符串。
函数表达式在使用前必须先赋值。

1
2
3
4
sayHi();
var sayHi = function(){
console.log("Hi!");
}

由于存在函数提升,所以不能在if……else语句中使用函数声明,但是可以使用函数表达式。

在把函数当成值来使用的情况下,都可以使用匿名函数。

递归

递归函数是一个函数通过名字调用自身的情况下构成的。

1
2
3
4
5
6
7
function factorial(num){
if(num <= 1){
return 1;
}else{
return num * factorial(num - 1);
}
}

但是在下面这段代码后上面这个函数可能就会出错

1
2
3
var anotherFactorial = factorial;
factorial = null;
console.log(anotherFactorial(4));//error

原因是factorial变量已经设置为null,不再指向原始函数的引用。这时候,使用arguments.callee可以解决这个问题

arguments.callee是一个指向正在执行的函数的指针,因此可以用它来实现对函数的递归调用,例如:

1
2
3
4
5
6
7
function factorial(num) {
if(num <= 1){
return 1;
} else {
return num * arguments.callee(num - 1);
}
}

但在严格模式下,不能通过脚本访问arguments.callee,访问这个属性会导致错误。不过,可以使用命名函数来达成相同的结果。

1
2
3
4
5
6
7
var factorial = (function f(num){
if(num <= 1) {
return 1;
}else{
return num * f(num - 1);
}
});

闭包

匿名函数与闭包不是相同的概念。闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createComparisonFunction(propertyName){

return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];

if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
};
}

在两行value1,value2访问了外部函数中的变量propertyName,之所以能够访问这个变量,是因为内部函数的作用域链中包含createComaprisonFunction()的作用域。

当某个函数被调用时,会创建一个执行环境(excution context)及相应的作用域链。然后,使用arguments和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象处于第三位,……直到作为作用域链终点的全局执行环境。

1
2
3
4
5
6
7
8
9
function compare(value1, value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}

先定义了compare()函数,然后又在全局作用域中调用了它。当第一次调用compare()时,会创建一个包含this、arguments、value1和value2的活动对象。全局执行环境的变量对象(包含this、result和compare)在compare()执行环境的作用域链接中则处于第二位。

后台的每个执行环境都有一个表示变量的对象——变量对象。全局环境的变量对象始终存在,而像compare()函数这样的局部环境的变量对象,则只在函数执行的过程中存在。在创建compare()函数时,会创建一个预先包含全局变量对象的作用域链,这个作用域链被保存在内部的[[scope]]属性中。当调用compare()函数时,会为函数创建一个执行环境,然后通过复制函数的[[scope]]属性中的对象构建起执行环境的作用域链。

作用域链本质上是一个指向环境变量对象的指针列表,它只引用但不实际包含变量对象。

1
2
var compare = createComparisonFunction("name");
var result = compare({name: "Nicholas"}, {name: "Greg"});

在匿名函数createComparisonFunction()中被返回后,它的作用域链被初始化为包含createComparisonFunction()函数的活动对象和全局变量。这样,匿名函数就可以访问在createComparisonFunction()中定义的所有变量。当createComparisonFunction()函数返回后,其执行环境的作用域链会被销毁,但它的活动对象仍会留在内存中;直到匿名函数被销毁后,createComparisonFunction()的活动对象才会被销毁。
例如:

1
2
3
4
5
6
7
8
//创建函数
var compareNames = createComparisonFunction("name");

//调用函数
var result = compareNames({ name: "Nicholas"}, {name: "Greg"});

//解除对匿名函数的引用
compareNames = null;

闭包与变量

闭包只能取得包含函数中任何变量的最后一个值,因为闭包所保存的是整个变量对象,而不是某个特殊的变量。

1
2
3
4
5
6
7
8
9
10
function createFunctions(){
var result = new Array();

for(var i = 0; i < 10 ; i++){
result[i] = function(){
return i;
};
}
return result;
}

实际上,每个函数都返回10。因为每个函数的作用域链中都保存着createFunctions()函数的活动对象,所以它们引用的都是同一个变量i。当createFunctions()函数返回后,变量i的值是10,此时每个函数都引用着保持变量i的同一个变量对象,所以在每个函数内部i的值都是10.

1
2
3
4
5
6
7
8
9
10
11
12
function createFunctions(){
var result = new Array();

for(var i = 0; i < 10 ; i++){
result[i] = function (num){
return function(){
return num;
}
}(i);
}
return result;
}

这里通过创建另一个匿名函数强制让闭包的行为符合预期。

在这个版本中,并没有直接把闭包赋值给数组,而是定义了一个匿名函数,并立即执行该匿名函数的结果赋值给数组。这里的匿名函数有一个参数num,也就是最终的函数要返回的值。调用每个匿名函数时,我们都传入了变量i。由于函数参数是按值传递的,所以就会将变量i的当前值复制给参数num。而在匿名函数内部,又创建并返回了一个访问num的闭包,这样一来,result数组中的每个函数都有自己num变量的一个副本,就可以返回各自不同的数值了。

关于this对象

在闭包种使用this对象会导致一些问题,this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。匿名函数的执行环境具有全局性,因此其this对象通常指向window。

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "The Window";

var object = {
name : "My Object",

getNameFunc : function() {
return function(){
return this.name;
};
}
}

alert(object.getNameFunc()());//The Window

以上代码先创建了一个全局变量name,又创建了一个包含name属性的对象。这个对象还包含一个方法——getNameFunc(),它返回一个匿名函数,而匿名函数又返回this.name。这个例子中返回的字符串是”The Window”。

前面提到过,每个函数在被调用时都会自动取得两个特殊变量:this和arguments。内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。

不过可以通过把外部作用域中的this对象保存在闭包能够访问到的变量里,就可以让闭包返回该对象了。

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "The Window";

var object = {
name : "My Object",

getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
}
alert(object.getNameFunc()());//The Window

在几中特殊情况下,this的值也可能会改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "The Window";

var object = {
name : "My Object",

getName : function() {
return this.name;
}
}

console.log(object.getName());//My Object
console.log((object.getName)());//My Object
console.log((object.getName = object.getName)());//The Window

第三句等于是把getName里的属性由之前的匿名函数赋值成了this.name

内存泄露

IE9之前的版本对JScript对象和COM对象使用不同的垃圾收集例程。

1
2
3
4
5
6
function assignHandle(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
};
}

以上创建了一个作为element元素事件处理程序的闭包,而这个闭包又创建了一个循环引用(onclick)。

匿名函数保存了一个对assignHandler()的活动对象的引用,因此就会导致无法减少element的引用数。

1
2
3
4
5
6
7
8
function assignHandle(){
var element = document.getElementById("someElement");
var id = element.id;
element.onclick = function(){
alert(id);
};
element = null;
}

即使闭包不引用element,包含函数的活动对象中也任然会保存一个引用。

模仿块级作用域

1
2
3
4
5
6
7
function outputNumbers(count){
for(var i = 0; i < count ; i++){
console.log(i);
}
console.log(i);
}
outputNumbers(2);//0,1,2

在JavaScript中,变量i是定义在outputNumbers()活动对象中的,因此与java、c++等语言中i只会在for循环的语句块中有定义不同。

匿名函数可以用来模仿块级作用域并避免这个问题。

1
2
3
(function(){
//这里是块级作用域
})();

以上代码定义并立即调用了一个匿名函数。

然而下面的代码会出错

1
2
3
function(){
//这里是块级作用域
}();//error

出错是因为JavaScript将function关键字当作一个函数声明的开始,而函数声明后面不能跟圆括号。然而函数表达式后面可以跟圆括号。要将函数声明转换为函数表达式,只要给它加上一对圆括号即可。

1
2
3
4
5
6
7
8
9
function outputNumbers(count){
(function(){
for(var i = 0; i < count ; i++){
console.log(i);
}
})();
console.log(i);//error
}
outputNumbers(2);//0,1,error

原理是,在匿名函数中定义的任何变量,都会在执行结束时被销毁。
而私有作用域中能够访问变量count,是因为这个匿名函数是一个闭包,它能够访问包含作用域中的所有变量。

这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域种添加过多的变量和函数。
例如在laravel-admin中标黄的这段github地址就使用了这一方法。

私有变量

严格来讲,javascript中没有私有成员的概念,所有对象属性都是公有的,不过有一个私有属性的概念。任何定义在函数中的变量,都可以认为是私有变量。不能在函数的外部访问这些变量包括函数的参数,局部变量和在函数内部定义的其他函数。

如果在函数内部创建一个闭包,那么闭包通过自己的作用域链可以访问这些变量。利用这一点,可以创建用于访问私有变量的公有方法。

我们把有权访问私有变量和私有函数的公有方法称为特权方法。个人觉得这有点像操作系统中的特权指令。

有两种在对象上创建特权方法的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function MyObject(){
//私有变量和私有函数
var privateVariable = 10;

function privateFunction(){
return false;
}

//特权方法
this.publicMethod = function(){
privateVariable++;
return privateFunction();
};
}

对于这个例子而言,变量privateVariable和函数privateFunction()只能通过特权方法publicMethod()来访问。
利用私有和特权成员,可以隐藏那些不应该被直接修改的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name){
this.getName : function(){
return name;
};
this.setName : function(){
name = value;
};
}

var person = new Person("Nicholas");
console.log(person.getName());//Nicholas
person.setName("Greg");
console.log(person.getName());//Greg

这两个方法getName()和setName()在构造函数中定义,有权访问私有变量name。

静态私有变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function(){
//私有变量和私有函数
var privateVariable = 10;

function privateFunction(){
return false;
}

//构造函数
MyObject = function(){

};
//公有/特权方法
MyObject.prototype.publicMethod = function(){
privateVariable++;
return privateFunction();
};
})();

这里使用函数表达式,不会有函数声明提前。在声明MyObject方法时没有使用var关键字,创建了一个全局变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function(){
var name = "";

Person = function(value){
name = value;
};

Person.prototype.getName = function(){
return name;
};

Person.prototype.setName = function(value){
name = value;
};

})();

var person1 = new Person("Nicholas");
console.log(person1.getName());//"Nicholas"
person1.setName("Greg");
console.log(person1.getName());//"Greg"

var person2 = new Person("Michael");
console.log(person1.getName());//"Michael"
console.log(person2.getName());//"Michael"

在这个例子中,Person的原型中设定了setName和getName两种方法,都有权访问私有变量name。变量name就变成了一个静态的、由所有实例共享的属性。

模块模式

模块模式是为单例创建私有变量和特权方法。

单例(singleton),指的就是只有一个实例的对象。
按照惯例,javascript是以对象字面量的方式来创建单例对象的。

1
2
3
4
5
6
var singleton = {
name : value,
method : function(){
//这里是方法的代码
}
};

模块模式通过为单例添加私有变量和特权方法增强单例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var singleton = function(){
//私有变量和私有函数
var privateVariable = 10;

function privateFunction(){
return false;
}
//特权/公有方法和属性
return {
publicProperty : true,

publicMethod : function(){
privateVariable++;
return privateFunction();
}
};
}();

这个模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部,首先定义了私有变量和函数。然后,将一个对象字面量作为函数的值返回。

增强的模块模式

在返回对象之前加入对其增强的代码。这种增强的模块模式适合那些单例必须是某种类型的实例,同时还必须添加某些属性和方法对其加以增强的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var singleton = function(){
//私有变量和私有函数
var privateVariable = 10;

function privateFunction(){
return false;
}

//创建对象
var object = new CustomType();
//添加特权/公有属性和方法
object.publicProperty = true;

object.pulicMethod = function(){
privateVariable++;
return privateFunction();
};

//返回这个对象
return object;
}();

如果前面演示模块模式的例子中的application对象必须是BaseComponent的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var application = function(){
//私有变量和函数
var components = new Array();

//初始化
components.push(new BaseComponent());

//创建application的一个局部副本
var app = new BaseComponent();

//公共接口
app.getComponentCount = function(){
retrun components.length;
};

app.rigisterComponent = function(component){
if(typeof component == "object"){
components.push(component);
}
};
//返回这个副本
return app;
}();

小结

函数表达式的特点

  • 函数表达式不同于函数声明。函数声明要求有名字,但函数表达式不需要。没有名字的函数表达式也叫做匿名函数。
  • 无法确定如何引用函数的情况下,递归函数就会变得比较复杂
  • 递归函数应该始终使用arguments.callee来递归地调用自身,不要使用函数名

当在函数内部定义了其他函数时,就创建了闭包。闭包有权访问包含函数内部的所有变量。

  • 后台执行环境中,闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域。
  • 通常,函数的作用域以及所有变量都会在函数执行结束后被销毁。
  • 但是,当函数返回了一个闭包时,这个函数的作用域将会一直在内存中保存到闭包不存在为止。

使用闭包可以模拟块级作用域。

  • 创建并立即调用一个函数
  • 以上的结果会因为函数被调用过后,内部的所有变量会被立即销毁——除非某些变量赋值给了包含作用域中的变量

闭包还可以作用在对象中创建私有变量。

  • 可以使用闭包来实现公有方法,而通过公有方法可以访问在包含作用域中定义的变量。
  • 有权访问私有变量的公有方法叫做特权方法
  • 可以使用构造函数模式、原型模式来实现自定义类型的特权方法,也可以使用模块模式、增强的模块模式来实现单例的特权方法。