匿名函数与闭包
匿名函数就是没有名字的函数。
闭包是可访问一个函数作用域里变量的函数。
匿名函数
//普通函数
function foo() {
return 'foo';
}
//匿名函数
function () { //匿名函数,会报错
return 'foo';
}
正确用法:
//把匿名函数赋值给变量
var foo = function () { //将匿名函数赋给变量
console.log("用变量保存匿名函数")
};
foo();
//通过表达式自我执行
(function () { //封装成表达式
console.log("一次性匿名函数直接执行")
})(); //()表示执行函数,并且传参
当然也可以这样玩:
//函数里的匿名函数
function foo () {
return function () { //函数里的匿名函数,产生闭包
return '函数里套函数';
}
}
res = foo()();
console.log(res);
闭包
闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见的方式,就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量。
闭包的玩法
//通过闭包可以返回局部变量
function foo() {
var user = 'hello';
return function () { //通过匿名函数返回foo()局部变量
return user;
};
}
console.log(foo()()); //通过foo()()来直接调用匿名函数返回值
var f = foo();
console.log(f()); //另一种调用匿名函数返回值
闭包的优缺点
使用闭包有一个优点,也是它的缺点:就是可以把局部变量驻留在内存中,可以避免使用全局变量。(全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难,所以推荐使用私有的,封装的局部变量)。
一般函数执行完毕后,局部活动对象就被销毁,内存中仅仅保存全局作用域。但闭包的情况不同。闭包会使变量始终保存在内存中,如果不当使用会增大内存消耗。
使用闭包的好处:
- 希望一个变量长期驻扎在内存中
- 避免全局变量的污染
- 私有成员的存在
看下面案例:
var age = 100; //全局变量
function foo() {
age += 1; //模块级可以调用全局变量,进行累加
}
foo(); //执行函数,累加了
foo();
foo();
foo();
console.log((age));; //输出全局变量
//通过局部变量无法实现累加
function foo() {
var age = 100;
age ++; //累加
return age;
}
console.log(age);
console.log(foo()); //101
console.log(foo()); //101,无法实现,因为又被初始化了
如何做到变量a既是局部变量,又可以累加??
function foo() {
var age = 100;
return function () {
age += 1
return age
}
}
f = foo()
console.log(f());
console.log(f());
console.log(f());
console.log(f());
console.log(age);
作用域链的机制导致一个问题,在循环中里的匿名函数取得的任何变量都是最后一个值。
var arr = [];
for (var i = 0; i < 5; i++) {
arr[i] = function () {
return i
}
}
for (var j = 0; j < arr.length; j++) {
console.log(arr[j]());
}
上面的例子输出的结果都是5,也就是循环后得到的最大的i值。因为arr[j]调用的是匿名函数,匿名函数并没有自我执行,等到调用的时候,for循环已执行完毕,i早已变成5,所以最终的结果就是5个5。
那如果我们想实现,通过遍历对一个数组赋值多个函数,函数使用不同的i该怎么办呢?
//循环里包含匿名函数,自我执行匿名函数
var arr = [];
for (var i = 0; i < 5; i++) {
var foo = function () {
var local_i = i;
return function () {
return local_i;
}
}
arr[i] = foo();
}
for (var j = 0; j < arr.length; j++) {
console.log(arr[j]());
}
关于this对象
在闭包中使用this对象也可能会导致一些问题,this对象是在运行时基于函数的执行环境绑定的,如果this在全局范围就是window,如果在对象内部就指向这个对象。而闭包却在运行时指向window的,因为闭包并不属于这个对象的属性或方法。
var user = 'The Window';
var obj = {
user : 'The Object',
getUserFunction : function () {
return function () { //闭包不属于obj,里面的this指向window
return this.user;
};
}
};
alert(obj.getUserFunction()()); //The window
//可以强制指向某个对象
alert(obj.getUserFunction().call(obj)); //The Object
//也可以从上一个作用域中得到对象
getUserFunction : function () {
var that = this; //从对象的方法里得对象
return function () {
return that.user;
};
}
内存泄漏
由于IE的JScript对象和DOM对象使用不同的垃圾收集方式,因此闭包在IE中会导致一些问题。就是内存泄漏的问题,也就是无法销毁驻留在内存中的元素。
function box() {
var oDiv = document.getElementById('oDiv'); //oDiv用完之后一直驻留在内存
oDiv.onclick = function () {
alert(oDiv.innerHTML); //这里用oDiv导致内存泄漏
};
}
box();
那么在最后应该将oDiv解除引用来避免内存泄漏。
function box() {
var oDiv = document.getElementById('oDiv');
var text = oDiv.innerHTML;
oDiv.onclick = function () {
alert(text);
};
oDiv = null; //解除引用
}
PS:如果并没有使用解除引用,那么需要等到浏览器关闭才得以释放。
setTimeout 与 闭包
for(var i=0;i<5;i++){
setTimeout(function(){console.log(i)},2000);
}
for(var i=0;i<5;i++){
(function(){
setTimeout(function(){ console.log(i);},2000);
})();
}
说明:
- 1.会弹出5个5
- 2.第一次弹出会延迟2s,其余会接着弹出,没有延迟
- 3.因为异步函数必须等主进程运行完毕才会运行,setTimeout()内部
回调运行的时候,主进程已经运行完毕了,此时i=5,所以输出5。
因为 setTimeout 中的 i 是对外层 i 的引用。当 setTimeout 的代码被解释的时候,运行时只是记录了 i 的引用,而不是值。而当 setTimeout 被触发时,五个 setTimeout 中的 i 同时被取值,由于它们都指向了外层的同一个 i,而那个 i 的值在迭代完成时为 5,所以打印了五次 5。
那如何让五个函数输出0,1,2,3,4呢?
for(var i=0;i<5;i++){
(function(){
var j = i;
setTimeout(function(){ console.log(j);},2000);
})();
}