你不知道的JS---作用域和闭包

立即执行函数表达式

var a=2;
(function foo() {
	var a=3;
	console.log(a);
})();
console.log(a);

函数被包含在一个括号内部，因此成为了一个表达式，通过末尾加上另外一个括号可以立即执行这个函数。

闭包的定义

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

循环和闭包

要想每隔1s输出数字1-5.

for(var i=1;i<=5;i++){
	setTimeout(function timer(){
		console.log(i);
	}, i*1000);
}

以每秒一次的频率输出五次6.
原因：延迟函数的回调会在循环结束时才执行，实际情况是 尽管循环中的五个函数是在各个迭代中分别定义的，但他们都被封闭在一个共享的全局作用域中，因此实际上只有一个i。

IIFE会通过声明并立即执行一个函数来创建作用域。

for(var i=1;i<=5;i++){
	(function(){
		setTimeout(function timer(){
			console.log(i);
		}, i*1000);
	})();
}

但是，通过上面的立即调用函数依然达不到效果，我们的IIFE只是一个什么都没有的空作用域，它需要有自己的变量，用来在每个迭代中储存i的值。

for(var i=1;i<=5;i++){
	(function(){
		var j=i;
		setTimeout(function timer(){
			console.log(j);
		}, j*1000);
	})();
}

对上述代码的改进：

for(var i=1;i<=5;i++){
	(function(j){
		setTimeout(function timer(){
			console.log(j);
		}, j*1000);
	})(i);
}

在迭代内使用IIFE会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。
同样可以实现该功能的代码还有：

for(var i=1;i<=5;i++){
	let j=i;
	setTimeout(function timer(){
		console.log(j);
	}, j*1000);
}

for(let i=1;i<=5;i++){
	setTimeout(function timer(){
		console.log(i);
	}, i*1000);
}

变量的生命周期

var func=function () {
	var a=1;
	return function(){
		a++;
		alert(a);
	}
};
var f=func();
f();//2
f();//3
f();//4
f();//5

当退出函数后，局部变量并没有消失，这是因为当执行var f=func()时，f返回一个匿名函数的引用，可以访问到func()被调用时产生的环境，而局部变量a一直存在这个环境里。

闭包的使用场景

1、函数作为返回值

2、函数作为参数传递

function F1(){
	var a=100
	return function(){
		console.log(a)
	}
}
var f1=F1()
function F2(fn){
	var a=200
	fn()
}
F2(f1)//100

实际开发中闭包的应用

// 闭包实际应用中主要用于封装函数，收敛权限
function isFirstLoad(){
	var _list=[]
	return function(id){
		if(_list.indexOf(id)>=0){
			return false
		} else {
			_list.push(id)
			return true
		}
	}
}

// 使用
var firstLoad=isFirstLoad()
firstLoad(10)
firstLoad(10)
firstLoad(20)

1、封装变量

var mult=(function() {
	var cache={};
	return function(){
		var args=Array.prototype.join.call(arguments, ',');
		if(args in cache){
			return cache[args];
		}
		var a=1;
		for(var i=0,l=arguments.length;i<l;i++){
			a=a*arguments[i];
		}
		return cache[args]=a;
	}	
})();

2、延续局部变量的寿命

var report=function(src){
	var img=new Image();
	img.src=src;
};
report('http://xxx.com/getUserInfo')

var report=(function(){
	var imgs=[];
	return function(src){
		var img=new Image(src){
			var img=new Image();
			imgs.push(img);
			img.src=src;
		}
	}
})();

闭包的特性：

1、作为函数变量的一个引用，当函数返回时，其处于激活状态

2、闭包就是当一个函数返回时，并没有释放资源的栈区

闭包的原理：

因为闭包只有在被调用时才执行操作，所以它可以被用来定义控制结构，多个函数可以使用同一个相同的环境，这使得他们可通过改变那个环境相互交流

闭包使用场景：

1、采用函数引用方式的setTimeout调用

2、将函数关联到对象的实例方法

3、封装相关的功能

闭包的好处：

1、逻辑连续，当闭包作为另一个函数调用参数时，避免脱离当前逻辑二单独编写额外逻辑

2、方便调用上下文的局部变量。

3、加强封装，可以达到对变量的保护作用

闭包的坏处：浪费内存，闭包中的变量常驻内存，对闭包的使用不当会造成无效内存的产生。