JavaScript IIFE

立即调用的函数表达式(Immediately Invoked Function Expression)简称 IIFE,是一个JavaScript函数,一旦JavaScript运行时对其求值,它就会立即被调用。下面是一段大致相等的代码:

// IIFE
(function (message) {
  console.log(message);
})('Hello World');
// LOGS: 'Hello World'

// Equivalent code using named function
function logMessage(message) {
  console.log(message);
}

logMessage('Hello World'); // LOGS: 'Hello World'

还记得“roughly equivalent”的部分吗?唯一的区别是使用命名函数而不是匿名函数。从这个例子中,我们可以很容易地推断出一个生命的解剖结构,把它分解成不同的部分:

  • 可选的前导分号,以避免在缩小等情况下出现类型错误
  • 一个匿名函数,包含我们要调用的所有代码
  • 打开和关闭括号来包装匿名函数
  • 调用函数的括号和调用函数的任何参数

请注意,如果您愿意,也可以为 IIFE 使用箭头函数。在这种情况下,一定要记住正则函数和箭头函数之间的区别。我们以前关于箭头函数和 this 关键字的文章应该会介绍它们。

// All of these are equivalent, leading semicolon is optional
;(() => console.log('Hello'))();
;(function(){ console.log('Hello'); })();
;(function(){ console.log('Hello'); })();
;(function(){ console.log('Hello'); }());

IIFE 通常用于运行某些代码,同时将其及其变量保持在全局范围之外。他们经常被批评缺乏可读性和他们是如何混淆初学者。此外,随着 JavaScript 模块和 Transpiler 的兴起,它们开始过时,因此随着时间的推移,它们可能越来越不常见。

原文链接:https://www.30secondsofcode.org/blog/s/javascript-iife

posted @ 2021-06-17 20:38  guangzan  阅读(68)  评论(0编辑  收藏  举报