您的位置:首页 > Web前端 > JavaScript

JavaScript 匿名函数和闭包

2017-08-13 23:05 393 查看

JavaScript函数表达式

函数有两种定义方式:

+ 函数声明 function functionName(arg0,arg1){}

+ 函数表达式var functionName = function(arg0,arg1){};//这种情况下创建的函数叫做匿名函数(anonymous function),匿名函数的name属性为空字符串

匿名函数

匿名函数作用:

+ 把函数当成值使用

function createComparisonFuction(properyName){
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;
}
}
}


createComparisonFuction()返回了一个匿名函数。返回的函数可能赋值给一个变量,或者以其他方式被调用;不过,在createComparisonFuction()函数内部,他是匿名的。把函数当成值来使用的情况,都可以使用匿名函数。

+ 递归

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


以上代码创建一个名为f()的命名表达式,然后将它赋值给变量 factorial。即便把函数赋值给了另一个变量,函数的名字f仍然有效。所以递归可以正常完成。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常用方式,就是在一个函数内部创建另一个函数,仍以前面的createComparisonFuction()函数为例

function createComparisonFuction(properyName){
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;
}
}
}


在上述代码中,有两行代码访问了propertyName。分析:即使这个内部函数被返回了,而且是在其他地方被调用了,但它仍然可以访问变量propertyName.之所以还能访问这个变量,是因为内部函数的作用域链找那个包含 createComparisonFuction()的作用域。

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

var compare = createComparisonFuction("name");
var result = compare({name:"Nicholas"},{name:"Gerg"});


在匿名函数从createComparisonFuction()中被返回后,它的作用域链被初始化为包含createComparisonFuction()函数的活动对象和全局变量对象。这样,匿名函数就可以访问在createComparisonFuction()中定义的所有变量,更为重要滴是,createComparisonFuction()函数在执行完毕后,其活动对象也不会被销毁,因为匿名函数的作用域链仍然在引用这个歌活动对象。换言之,createComparisonFuction()函数返回后,其执行环境的作用域链会被销毁,但它的活动对象仍然会留在内存中,直到匿名函数被销毁后,createComparisonFuction()的活动对象才会被销毁

//解除对匿名函数的引用(以便释放内存)
compare = null;


首先,创建的比较函数被保存在变量compare中,而通过将compare设置为null解除对该函数的引用,就等于通知垃圾回收例程将其清除。

闭包与变量

作用域链的这种配置机制引出了一个值得注意的副作用,即闭包只能取得包含函数中任何变量的最后一个值。别忘了,闭包保存的是整个变量对象,而不是特殊的变量

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


这个函数会返回一个数组,但是每个数组都是10。因为每个函数的作用域链中都保存着createFunctions()函数的活动对象,所以它们引用的都是同一个 i .

但是我们可以通过创建另一个匿名函数强制闭包的行为符合预期的目的。例如

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=window

+ 当函数被作为某个对象的方法调用时,this等于那个对象。

不过匿名函数的执行环境具有全局性,因此this通常指向window。

var name = "The Window";
var object = {
name: "My Object",
getNameFunc:function(){
return function(){
return this.name;
}
}
};
alert(object.name);//The Window


分析原因:由于每个函数在被调用时都会动取得两个特殊变量:this和arguments。内部函数在搜索这连个变量时,只会搜索到其他活动对象为止,因此永远不可能直接访问到外部的这两个变量。

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

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


同样,arguments也有同样的问题,所以如果想在闭包中访问外部作用域中的arguments对象,也可以先将其保存在一个闭包可以访问的变量中。

在几种特殊的情况下,this的值可能发生改变

var name = "The Object";
var object = {
name:"My Objcet",
getName:function(){
return this.name;
}
};
object.getName();// My Object
(object.getName)();//My Object
(object.getName == object.getName)();// The Window


第一行,因为this.name 就是 object.name

第二行,虽然在调用这个方法前先给它加上了扩号。虽然加上扩号后就好像在引用一个函数,但是this的值得到了维持

第三行,先执行了一条赋值语句,然后再调用赋值后的结果,因为这个赋值表达式的值是函数本身,所以this的值不能得到维持,结果就返回了 The Window

内存泄露

如果闭包的作用域链中保存着一个HTML元素,那么就意味这该元素将无法被销毁。

function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
};
}


此处在element元素事件处理程序的闭包中创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用。因此会减少对element的引用数,使得element的引用数至少为1,因此它占有的内存将永远不会被回收。

解决方法:

function assignHandler(){
var element = document.getElementById("someElement");
var id = element.id;
element.onclick = function(){
alert(id);
};
element = null;
}


模仿块级作用域—私有作用域

javaScript中没有块级作用域,且对于同一变量的重复声明,会对后续的声明视而不见。利用匿名函数可以模仿块级作用域

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


以上代码定义并立即调用了一个匿名函数。加一个括号,是为了把函数声明变为函数表达式。因为函数声明后不能直接跟括号,而函数表达式可以。

无论在什么地方,只要临时需要一些变量,就可以使用私有作用域

function outoutNumbers(count){
(function(){
for(var i =0;i<count;i++){
alert(i);
}
})();
alert(i);//此时会报错,因为相当于i没有被声明过
}


这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: