闭包应用-立即执行函数IIFE

立即执行函数IIFE

• 声明一个匿名函数
• 马上调用这个匿名函数
• 销毁该函数（语句结束，没有任何引用了）

(function(){
  console.log(111)
})()

IIFE应该会UI与闭包结合起来发挥巨大的作用

创建临时独立作用域

创建一个累加器这样的功能，需要一个临时变量用于保存累加状态。放在全局作用域显然不太优雅，最简单的方法就是创建一个IIFE然后创建变量，返回一个函数，然后在函数中完成累加功能。

var n=0
setInterval(()=>console.log(++n),1000)

setInterval((function(){
  var n=0
  return ()=>console.log(++n)
})(),1000)

解决变量名冲突

利用参数优先全局变量的规则，可以让函数内部的小环境内限制作用域变量成名。 比如：jquery会使用的全局变量，但是其他库也有可能使用这个函数名，这样就会赵成函数名冲突。 假定我们有大量存量代码使用这个函数名调用jquery，我们不太可能全部改写这个代码。这时候其实使用即时函数就可以很好的解决这个问题。

const $=()=>console.log('Not jQuery')
(function($){
  $(document).ready(function(){
    console.log('jQuery')
  })
})(jQuery)
$()

使用简介变量名

作用类似with功能

const state={
  data:{
    name:'张三'
  }
};
(function(val){
  console.log(val)
})(state.data.name)

with(state){
  console.log(data.name)
}

循环陷阱

作为Javascript面试题八大陷阱题之一

const arr=[]
for(var i=0;i<5;i++){
  arr.push(function(){
    return console.log(i)
  })
}
arr[0]() 5
arr[1]() 5

原因是由创建的函数引用外部变量形成闭包。所有的新创建的函数引用都是用一个变量。

循环内加入即时函数，由于即时函数的参数为实参复制关系，相当于复制的现场快照。

const arr = []
for (var i = 0; i < 5; i++) {
  (function (n) {
    arr.push(function () {
      return console.log(n)
    })
  })(i)
}
arr[0]()
arr[1]()