JavaScript 中的 立即执行函数表达式(IIFE) – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第31节,你可以查看该手册的完整目录。

立即执行函数表达式(IIFE) 是在创建函数后立即执行函数的方法。

立即执行函数表达式(IIFE) 非常有用,因为它们不会污染全局对象,它们是隔离变量声明的简单方法。

这是定义 IIFE 的语法:

;(function() {
  /* */
})()

立即执行函数也可以使用箭头函数定义:

;(() => {
  /* */
})()

基本上,我们在括号内定义了一个函数,然后在后面加上一个括号 () 来执行该函数:(/* function */)()

包裹函数的括号实际上是使我们的函数在内部被视为表达式。 否则,函数声明将无效,因为我们没有指定任何名称:

函数声明需要一个名称,而函数表达式不需要它。

你也可以将调用括号放在表达式括号内,没有区别,只是写法不同:

(function() {
  /* */
}())

(() => {
  /* */
}())

使用一元运算符的替代语法

你可以使用一些更奇怪的语法来创建 IIFE ,但它在现实世界中很少使用,并且它依赖于使用任何一元运算符:

;-(function() {
  /* */
})()

+(function() {
 /* */
})()

~(function() {
  /* */
})()

!(function() {
  /* */
})()

但是这种方式不适用于箭头函数。

命名的 IIFE

IIFE 也可以是命名的常规函数(不是箭头函数)。 这不会导致函数“泄漏”到全局作用域,并且在执行后也不能再次调用它:

;(function doSomething() {
  /* */
})()

IIFE 前的分号

你可能已经注意到 IIFE 前的分号了:

;(function() {
  /* */
})()

这可以防止在盲目合并两个 JavaScript 文件时出现问题。 由于 JavaScript 不需要分号,因此你可能会在最后一行中使用某些语句连接一个文件,从而导致语法错误。

这个问题基本上是通过像 webpack 这样的“智能”打包工具来解决的。


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(0) 打赏
未经允许不得转载:WEB前端开发 » JavaScript 中的 立即执行函数表达式(IIFE) – JavaScript 完全手册(2018版)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏