什么是立即执行函数 (IIFE)?它的作用是什么?请写出一个 IIFE 的例子。

推荐答案

立即执行函数(Immediately Invoked Function Expression,IIFE)是一种在定义后立即执行的 JavaScript 函数。它通过将函数表达式包裹在圆括号 () 中,并在末尾添加另一对圆括号 () 来实现。

IIFE 的主要作用包括:

  1. 创建独立的作用域: 避免全局变量污染,保护内部变量和函数,使其不被外部访问或修改。
  2. 模拟块级作用域: 在 ES6 引入 letconst 之前,IIFE 是创建块级作用域的常用方法。
  3. 执行一次性初始化代码: 当需要在页面加载时执行一些初始化代码,且不希望这些代码污染全局作用域时。

一个 IIFE 的例子:

本题详细解读

IIFE 的定义

立即执行函数,顾名思义,就是在函数定义完成之后立刻执行的函数。它的基本结构是:

或者:

两种写法等价,都是将一个匿名函数表达式用圆括号 () 包裹起来,使之成为一个函数表达式。然后,在函数表达式后面再加一个 () ,表示立即调用这个函数。

IIFE 的作用

1. 创建独立的作用域

在 JavaScript 中,函数内部会创建一个新的作用域。在 ES6 之前,只有函数作用域,没有块级作用域。这意味着,在函数外部无法访问函数内部定义的变量。IIFE 利用这个特性,将代码包裹在函数内部,创建了一个独立的作用域,从而避免了全局变量的污染。

-- -------------------- ---- -------
--- --------- - ---- --------

----------- -
    --- -------- - ---- -------
    ----------------------- -- -- ---- -------
    ---------------------- -- -- ---- ------
-----

----------------------- -- -- ---- -------
-- ---------------------- -- ----------- -- --- -------

在这个例子中,localVar 只能在 IIFE 内部访问,外部无法访问,避免了变量冲突和污染全局作用域。

2. 模拟块级作用域

在 ES5 及更早的版本中,JavaScript 没有块级作用域(例如,if 语句或 for 循环内部)。这意味着,在这些块中定义的变量会“泄露”到其外部作用域。IIFE 可以模拟块级作用域,从而解决这个问题。

-- -------------------- ---- -------
--- ---- - - -- - - -- ---- -
    --------------------- -
        --------------- -- -- - - - - -
    -- --- - ---
-

--- ---- - - -- - - -- ---- -
    ------------ -
        --------------------- -
            --------------- -- -- - - - - -
        -- --- - ---
    ------
-

第一个循环中,由于 var i 的作用域是全局的,所有 setTimeout 中的回调函数都引用同一个变量 i,当循环结束后 i 的值是 5,所以所有回调输出的都是 5。

第二个循环使用 IIFE 创建了一个新的作用域,每次迭代都将当前的 j 值作为参数 k 传递到 IIFE 的函数体,所以每个回调函数都有一个不同的 k,最终输出了 0 到 4。

3. 执行一次性初始化代码

有时需要在页面加载时运行一些初始化代码,并且这些代码不应该在其他地方再次运行。IIFE 非常适合这种情况,因为它会在定义后立即执行,并且内部变量和函数不会污染全局作用域。

例如,你可能需要初始化一些插件,或者加载一些配置:

-- -------------------- ---- -------
----------- -
  -- -------
  --------------
  --------------

  -- ----
  -------------

  ---------------------
-----

总结

IIFE 是一种强大的 JavaScript 模式,它通过创建独立的作用域、模拟块级作用域和执行一次性代码,帮助我们编写更清晰、更安全的代码。

纠错
反馈