JavaScript立即执行函数

2022-11-18 104 阅读2分钟

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 立即执行函数的其它写法

立即执行函数必须是一个表达式（整体），不能是函数声明（了解即可）：
- 下面的这种写法会报错，因为是一个函数声明，不是一个函数表达式；
- 当圆括号出现在匿名函数的末尾想要调用函数时，它会默认将函数当成是函数声明。
当圆括号包裹函数时，它会默认将函数作为表达式去解析，而不是函数声明。
还有其它的，不会那样用，这里就不写了