js立即执行函数（IIFE）与闭包

浅谈IIFE

IIFE就是立即执行函数表达式（Immediately-Invoked Function Expression）

目的：防止变量全局污染，以及保证内部变量的安全

实例：

for(var i=0;i<5;i++){
  setTimeout(function(){
    console.log(i);
  },1000);
}
//该函数执行结果为55555

• 只要用了setTimeout，即使毫秒数为0，里面的函数不会马上放到执行栈里，而是由浏览器先进行处理，得到结果后将结果放入任务队列里，等执行栈执行完后才会根据时间间隔开始执行任务队列里的内容，所以输出5555

for(var i=0;i<5;i++){
  (function(x){ 
    setTimeout(function(){
      console.log(x);
    },1000);
  })(i)
}
//利用它减少全局变量造成的空间污染
//0 1 2 3 4

• 在for循环内创建立即执行函数，立即执行函数执行的时，会用每一轮得到的i的值，x为执行函数的形参，相当于实参i的值

执行过程：

闭包

如何产生闭包？

• 当一个嵌套的内部函数引用了嵌套的外部函数的变量时，就会产生闭包

function f1(){
	var a = 2
	var b = 'abc'
	//执行函数定义就会产生闭包（不用调用内部函数）
	function f2(){
		//这里的a引用了外部的a，所以产生闭包
		console.log(a)
	}
}
f1();

产生闭包的条件？

• 执行外部函数-outer()
• 函数嵌套
• 内部函数引用了外部函数的数据（变量/函数）

闭包的作用？

• 使用函数内部的变量，在函数执行完后，仍然存活在内存中（延长了及局部变量的生命周期）
• 让函数外部可以操作（读写）到函数内部的数据（变量/函数）

闭包实例一：

function outer() {
    let name = 1
    function inner() {
        return name ++
    }
    return inner
}
let g = outer()
console.log(g()) // 2
console.log(g()) // 3
console.log(g()) // 4
console.log(g()) // 5

• 变量g返回outer方法中的inner方法，当打印g()时，inner方法会拿到外部name的值，此时name=2，保存在闭包，下次调用g方法时会拿取内存name=2进行下一步操作

闭包实例二：

function f1() {
	console.log('666')
}
setTimeout(f1(),3000) // 并没有延时，直接输出666

• 传入的f1()为函数执行，而setTimeout需要先定义后执行，这里的先执行了f1()，所以导致直接输出666
• setTimeout(f1,3000)这种方式可以解决先执行的错误，因为这里传入的f1是函数地址而非执行函数

如需要传参引入的方式：

function f1(num) {
	console.log(num)
}
setTimeout(f1(666),3000) // 错误做法：会直接输出666

正确做法：

• 第一种：用es6箭头函数 setTimeout(()=>{f1(666)},3000)，该方法作为函数的回调参数使用
• 第二种：运用闭包

function f2(a) {
	function f3() {
		console.log(a);
	}
	return f3;
}
var fun = f2(666);
setTimeout(fun,3000);

• 此时fun是做为回调地址引入setTimeout，所以不会立即执行