IIFE 立即调用函数表达式

86 阅读2分钟

IIFE 是一种立即执行的函数表达式,这种函数在定义的同时就被立即执行,用于避免全局命名空间污染和模块化编程方面

IIFE 的核心思想是将一个函数定义和调用结合到一起,使得函数在定义后立即执行。

// IIFE 立即调用函数表达式基本样式(两种,仔细查看可观察出不同)
(function() {
    // 函数体
})();

(function() {
    // 函数体
}())

匿名函数直接跟随着一对圆括号,用于立即调用该函数。
(function( ) {/* code */})( );

  • 解释:这里没有额外的外层圆括号包裹整个函数表达式,而是直接在函数定义后面加上了一堆圆括号来触发函数立即执行。
  • 优点:这种形式更加简洁,减少了不必要的字符,但同样有效的实现了立即调用的目的。

将函数声明包裹在一对圆括号内,紧接着在其后添加一对圆括号来立即调用该函数。
(function( ) {/* code */} ( ));

  • 解释:首先,整个匿名函数被包裹在一个额外的圆括号内,这使得JavaScript解析器能够识别是一个函数表达式而不是函数声明。然后,外部的一对圆括号用于立即调用这个函数。
  • 优点:这种方式更明确的表明了这是一个函数表达式,有助于提高代码的可读性,尤其是在一些旧版本的JavaScript引擎中,它能够更好地避免解析错误。

实际区别:
从功能来看,这两种形式几乎没有区别,都是创建一个新的作用域并立即执行函数体的代码。所以选择哪种取决于个人或团队的编码风格偏好:

  • 如果你追求简洁并且认为多余的括号没有必要,则可能更喜欢第一种式 (function(){/* code */})();
  • 如果你倾向于更明确地标记出这是一个函数表达式,可能会偏好第二种形式 (function(){/* code */}());

注意事项:
无论使用哪种形式,重要的是确保正确使用分号结束语句,特别是在IIFE之后,以防止自动插入(ASI)机制可能导致的意外行为。

var result = 42; // 确保这里有分号 
(function(){ 
    console.log("This is an IIFE"); 
})();

这样做可以避免潜在的语法错误和逻辑问题。总之,这两种形式都是有效的IIFE实现方式