JS中的函数表达式

本文详细探讨了JavaScript中的函数表达式,包括函数声明提升和匿名函数的使用。接着介绍了如何利用函数实现递归,特别是如何在严格模式下处理arguments.callee。文章深入讲解了闭包的概念,描述了作用域链、闭包与变量的关系,并指出闭包可能导致的变量问题。此外,还讨论了如何利用闭包创建私有变量和特权方法,最后提到了模拟块级作用域的匿名函数及其在定义私有变量中的应用。

1. 函数表达式的特征

定义函数的方式有两种,一种是函数声明,一种是函数表达式。

function sayHi(arg0, arg1, arg2) {  // 函数声明
	alert("hi");
}

var sayHi = function(){ //函数表达式
	alert("hi");
}
函数声明提升

在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。

sayHi(); 
function sayHi(){  // 不会报错   会先读取函数声明到作用域的头部
 	alert("Hi!");   
}
函数表达式

这种形式看起来好像是常规的变量赋值语句,即创建一个函数并将它赋值给变量。这种情况下创建的函数叫做匿名函数(anonymous function),因为 function 关键字后面没有标识符。(匿名函数有时候也叫拉姆达函数。)
匿名函数的 name 属性是空字符串。 函数表达式与其他表达式一样,在使用前必须先赋值

sayHi(); //错误:函数还不存在
var sayHi = function(){ 
 	alert("Hi!"); 
};

使用函数表达式,可以创建函数再赋值给变量,也就能够把函数作为其他函数的值返回
在把函数当成值来使用的情况下,都可以使用匿名函数。

2. 使用函数实现递归

在实现递归的时候,可以使用arguments.callee (一个指向正在执行的函数的指针)。

function factorial(num){ 
	 if (num <= 1){ 
	 	return 1; 
	 } else { 
	 	return num * arguments.callee(num-1); 
	 } 
}

通过使用 arguments.callee 代替函数名,可以确保无论怎样调用函数都不会出问题。因此,在编写递归函数时,使用 arguments.callee 总比使用函数名更保险。
然而,在严格模式下,不能通过脚本访问 arguments.callee,访问这个属性会导致错误。
此时,可以使用命名函数表达式来达成相同的结果。

var factorial = (function f(num){ 
	 if (num <= 1){ 
	 	return 1; 
	 } else { 
	 	return num * f(num-1); 
	 } 
});

3. 闭包定义与特性

一般函数的作用域链

对于下面的例子:

function compare(value1, value2){ 
	 if (value1 < value2){ 
	 	return -1; 
	 } else if (value1 > value2){ 
	 	return 1; 
	 } else { 
	 	return 0; 
	 } 
} 
var result = compare(5, 10);

以上代码先定义了 compare()函数,然后又在全局作用域中调用了它。
当调用 compare()时,会创建一个包含 arguments、value1 和 value2 的活动对象。
全局执行环境的变量对象(包含 result和 compare)在 compare()执行环境的作用域链中则处于第二位。
作用域链如下图所示:
在这里插入图片描述

  • 后台的每个执行环境都有一个表示变量的对象——变量对象
  • 全局环境的变量对象始终存在,而像compare()函数这样的局部环境的变量对象,则只在函数执行的过程中存在
  • 创建 compare()函数时,会创建一个预先包含全局变量对象的作用域链,保存在内部的_[[Scope]]属性_中。
  • 调用 compare()函数时,会为函数创建一个执行环境,然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链
  • 此后,又有一个活动对象(在此作为变量对象使用)被创建并被推入执行环境作用域链的前端
  • 对于这个例子中 compare()函数的执行环境而言,其作用域链中包含两个变量对象:本地活动对象和全局变量对象。
  • 作用域链本质上是一个指向变量对象的指针列表,它只引用但不实际包含变量对象
闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数
示例如下:

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; 
		 } 
	}; 
}

之所以还内部函数能够访问外部函数的变量,是因为内部函数的作用域链中包含createComparisonFunction()的作用域。

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

一般来讲,当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(全局执行环境的变量对象)。但是闭包的情况不太一样。

在另一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中。

因此,在 createComparisonFunction()函数内部定义的匿名函数的作用域链中,实际上将会包含外部函数createComparisonFunction()的活动对象

当执行下列代码时的作用域链如下图所示:

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

在这里插入图片描述
值得注意的是:
createComparisonFunction()函数在执行完毕后,其活动对象也不会被销毁,因为匿名函数的作用域链仍然在引用这个活动对象。
即: 其执行环境的作用域链会被销毁,但它的活动对象仍然会留在内存中;直到匿名函数被销毁后createComparisonFunction()的活动对象才会被销毁。

闭包与变量

在闭包中使用外部函数的变量存在着一个问题:内部函数只能获得外部变量的最终值。因为闭包所保存的是整个变量对象,而不是某个特殊的变量。 看下面的例子:

function createFunctions(){ 
	 var result = new Array(); 
	 for (var i=0; i < 10; i++){ 
		 result[i] = function(){ 
		 	return i;   // 内部函数保存着外部函数的活动对象,所以最后每个函数的返回值都是10.
	 	}; 
	 } 
	 return result; 
}

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

我们可以通过立即执行匿名函数让函数的行为符合预期。

function createFunctions(){ 
	 var result = new Array(); 
	 for (var i=0; i < 10; i++){ 
		 result[i] = function(num){   // 函数的参数是值传递的,就不存在上述问题。
			 return function(){ 
			 	return num; 
			 }; 
		 }(i);  // 表示函数立即执行,i作为函数参数传入。
	 } 
	 return result; 
}
闭包中的this对象

this 对象是在运行时基于函数的执行环境绑定的:在全局函数中,this 等于 window,而当函数被作为某个对象的方法调用时,this 等于那个对象。
匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window。看下面的例子:

var name = "The Window"; 
var object = { 
	 name : "My Object", 
	 getNameFunc : function(){ 
		 return function(){ 
		 	return this.name;  // 其this对象指向window
		 }; 
	 } 
}; 
alert(object.getNameFunc()()); //"The Window"(在非严格模式下)

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

var name = "The Window"; 
var object = { 
	 name : "My Object", 
	 getNameFunc : function(){ 
		 	return this.name;  // 其this对象指向object
	 } 
}; 
alert(object.getNameFunc()); //"My Object"(在非严格模式下)

所以, 把外部作用域中的 this 对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了。
如下:

var name = "The Window"; 
var object = { 
	 name : "My Object", 
	 getNameFunc : function(){
		 var that = this;  // that指向object的作用域
		 return function(){ 
		 	return that.name; 
		 }; 
	 } 
}; 
alert(object.getNameFunc()()); //"My Object"

arguments 也存在同样的问题,如果想访问作用域中的 arguments 对象,必须将对该对象的引用保存到另一个闭包能够访问的变量中。

4. 匿名函数模仿块级作用域

JavaScript 从来不会告诉你是否多次声明了同一个变量;
遇到这种情况,它只会对后续的声明视而不见(不过,它会执行后续声明中的变量初始化)。
匿名函数可以用来模仿块级作用域并避免这个问题。
用作块级作用域(通常称为私有作用域)的匿名函数的语法如下所示。

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

以上代码定义并立即调用了一个匿名函数。将函数声明包含在一对圆括号中,表示它实际上是一个函数表达式。而紧随其后的另一对圆括号会立即调用这个函数。而下面这种写法将会导致错误:

	function(){ 
	 //这里是块级作用域
	}(); //出错!

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

function outputNumbers(count){ 
	 (function () {   // 在任何一个需要一些临时变量的地方, 就可以这样使用匿名函数来定义。
		 for (var i=0; i < count; i++){ 
		 	alert(i); 
		 } 
	 })(); 
	 
	 alert(i); //导致一个错误!
}

在匿名函数中定义的任何变量,都会在执行结束时被销毁。

5. 使用闭包定义私有变量

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

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

有权访问私有变量和私有函数的公有方法称为特权方法(privileged method)。

创建特权方法的方式有两种:
(1) 在构造函数中定义特权方法。 其基本模式如下:

function MyObject(){ 
	 //私有变量和私有函数
	 var privateVariable = 10; 
	 function privateFunction(){ 
	 	return false; 
	 } 
	 //特权方法 (可以访问私有变量和私有函数,也是访问它们的唯一途径)
	 this.publicMethod = function (){ 
		 privateVariable++; 
		 return privateFunction(); 
	 }; 
}

利用私有和特权成员,可以隐藏那些不应该被直接修改的数据。示例如下:

function Person(name){ 
	 this.getName = function(){  
	 	return name; 
	 };
	 this.setName = function (value) { 
		 name = value; 
	 }; 
} 
var person = new Person("Nicholas"); 
alert(person.getName()); //"Nicholas" 
person.setName("Greg"); 
alert(person.getName()); //"Greg"

但是在构造函数中定义特权方法,存在着和构造函数模式一样的问题:每次创建新对象都会创建一组新的方法。而静态私有变量可以解决这一问题。

(2) 在私有作用域中定义私有变量或函数。(静态私有变量) 其基本模式如下:

(function(){ 
	 //私有变量和私有函数
	 var privateVariable = 10;  // 所有的实例都使用这个变量
	 function privateFunction(){ 
	 	return false; 
	 } 
	 //构造函数
	 MyObject = function(){ };   //初始化未声明的变量,总会创建一个全局变量 即:在函数外部也能访问到这个构造函数。
	 
	 //  公有/特权方法
	 MyObject.prototype.publicMethod = function(){   // 将公有方法写在原型上,所有的实例都共用一个变量
		 privateVariable++; 
		 return privateFunction(); 
	 }; 
})();

在创建构造函数时,不使用var操作符,直接初始化,这样就会创建一个全局变量。这样我们在函数外部也能访问构造函数。
使用这种方法,私有变量和函数时所有实例共享的。 看下面的例子:

(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"); 
alert(person1.getName()); //"Nicholas" 
person1.setName("Greg"); 
alert(person1.getName()); //"Greg" 

var person2 = new Person("Michael"); 
alert(person1.getName()); //"Michael" 
alert(person2.getName()); //"Michael"
模块模式

这一模式是为单个实例的对象创建私有变量和特权方法
模块模式通过为单例添加私有变量和特权方法能够使其得到增强,其语法形式如下:

var singleton = function(){ 
	 //私有变量和私有函数
	 var privateVariable = 10; 
	 function privateFunction(){ 
	 	return false; 
	 }
	 //特权/公有方法和属性
	 return { 
		 publicProperty: true, 
		 publicMethod : function(){ 
			 privateVariable++; 
			 return privateFunction(); 
	 	 } 
 	  }; 
}();

这种模式在需要对单例进行某些初始化,同时又需要维护其私有变量时是非常有用的。

增强的模块模式
var singleton = function(){ 
	 //私有变量和私有函数
	 var privateVariable = 10; 
	 function privateFunction(){ 
	 	return false; 
	 } 
	 //创建对象
	 var object = new CustomType(); 
	 //添加特权/公有属性和方法
	 object.publicProperty = true; 
	 object.publicMethod = function(){ 
		 privateVariable++; 
		 return privateFunction(); 
	 }; 
	 //返回这个对象
	 return object; 
}();

这种增强的模块模式适合那些单例必须是某种类型的实例,同时还必须添加某些属性和(或)方法对其加以增强的情况。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值