JavaScript立即执行函数

1 立即执行函数

• 立即执行函数必须是一个表达式（整体），不能是函数声明（了解即可）：

• 下面的这种写法会报错，因为是一个函数声明，不是一个函数表达式；
• 当圆括号出现在匿名函数的末尾想要调用函数时，它会默认将函数当成是函数声明。

• 当圆括号包裹函数时，它会默认将函数作为表达式去解析，而不是函数声明。

• 下面是一个函数表达式，所以可以执行

但一般不会像这里这样

• 一般写这个立即执行函数时会在前面加一个分号

;(function foo() {
  console.log('哈哈哈')
})()

• 因为现在很多人写完一句 js 时是不喜欢加分号的，所以在这就会出现下面这样的问题

2 立即执行函数的应用

应用场景一： 防止全局变量的命名冲突

• 立即执行函数和普通的代码有什么区别?

• 在立即执行函数中定义的变量是有自己的作用域的，当要引入一些 js 文件时，文件里的变量或者其它的发生冲突该怎么避免，那就是用它了

// 在 xiaoming.js 中
(function() {
  var message = "Hello XiaoMing"
})()
// 那么引入 xiaoming.js 后就不能访问到 message 了
// 如果确实需要访问，那么 就像下面这样
var xmModule = (function() {
  var xmModule = {}
  var message = "Hello XiaoMing"
  xmModule.message = message
  return xmModule
})()
// 那么在引入了 xiaoming.js 的文件中就可以直接访问了
console.log(xmModule.message) 

应用场景二：ES5及以前的一个用途，见下例

• 在以下代码中发现无论点击哪个按钮都是输出：‘按钮5发生了点击’

• 为什么会这样呢？
  

请看下面，循环结束后，它的效果是像下面这样的，所以才会出现上面的问题

• 该如何解决呢？就按下面这样，按钮点击后输出语句先在当前作用域中找m，没找到，就去立即执行函数的里面找，能找到，就用它的

3 立即执行函数的其它写法

• 立即执行函数必须是一个表达式（整体），不能是函数声明（了解即可）：

• 下面的这种写法会报错，因为是一个函数声明，不是一个函数表达式；
• 当圆括号出现在匿名函数的末尾想要调用函数时，它会默认将函数当成是函数声明。

• 当圆括号包裹函数时，它会默认将函数作为表达式去解析，而不是函数声明。

• 还有其它的，不会那样用，这里就不写了