匿名函数与闭包

匿名函数与闭包

匿名函数就是没有名字的函数。

闭包是可访问一个函数作用域里变量的函数。

匿名函数

//普通函数
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());					//另一种调用匿名函数返回值

闭包的优缺点

使用闭包有一个优点，也是它的缺点：就是可以把局部变量驻留在内存中，可以避免使用全局变量。(全局变量污染导致应用程序不可预测性，每个模块都可调用必将引来灾难，所以推荐使用私有的，封装的局部变量)。

一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同。闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。

使用闭包的好处：

1. 希望一个变量长期驻扎在内存中
2. 避免全局变量的污染
3. 私有成员的存在

看下面案例：

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

各位看官留个赞再走吧！哈哈哈哈哈