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