(function ( ){...})( ) IIFE 的原理

￡神魔★判官ぃ 2021-09-12 02:14 227阅读 0赞

你需要明白 IIFE 的原理，我简单说一下：

function foo() {...} // 这是定义，Declaration；定义只是让解释器知道其存在，但是不会运行。 foo(); // 这是语句，Statement；解释器遇到语句是会运行它的。

IIFE 并非必须，传统一点可以这么写：

function foo() {...} foo();

那么为什么要 IIFE？

1.  传统的方法啰嗦，定义和执行分开写；
2.  传统的方法直接污染全局命名空间（浏览器里的 `global` 对象，如 `window`）

于是，开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢？

function foo(...){}();

当然是不能，但是为什么呢？因为 `function foo(...){}` 这个部分只是一个声明，对于解释器来说，就好像你写了一个字符串 `"function foo(...){}"`，它需要使用解析函数，比如 `eval()` 来执行它才可以。所以把 `()` 直接放在声明后面是不会执行，这是错误的语法。

如何把它变得正确？说起来也简单，只要把 声明 变成 表达式（Expression） 就可以了。

实际上转变表达式的办法还是很多的，最常见的办法是把函数声明用一对 `()` 包裹起来，于是就变成了：

(function foo() {...}) // 这里是故意换行，实际上可以和下面的括号连起来 ();

这就等价于：

var foo = function () {...}; // 这就不是定义，而是表达式了。 foo();

但是之前我们说不行的那个写法，其实也可以直接用括号包起来，这也是一种等价的表达式：

(function foo(){...}());

所以你问有没有区别？很简单：木有～

另外，刚才说过转变表达式的方式很多，的确还有很多别的写法，比如：

!function foo() {...}();

或者

+function foo() {...}();

这些都可以。

我个人挺偏爱用 `void` 来转变表达式，因为此关键字不会有返回值。不过这一点真的没有什么要紧的，就当我“龟毛”好了……

void function () { // 这里是真正需要的代码 }();

OK，所谓不去污染全局命名空间，是因为 IIFE 创建了一个新的函数作用域，你真正的业务代码被封装在其中，自然就不会触碰到全局对象了。如果你需要全局对象，那就 pass 给 IIFE：

void function (global) {
        // 在这里，global 就是全局对象了
    }(this)    // 在浏览器里，this 就是 window 对象

``

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 中的 IIFE 是什么？

有时在 JavaScript 中我们需要一个只执行一次并且不再执行的函数。基本上是一个在调用一次后就消失的函数。我们怎样才能做到这一点？例如我们可以这样做： cons

淡淡的烟草味﹌/ 2024年03月23日 18:31/ 0 赞/ 93 阅读

相关在JavaScript中，什么是IIFE（Immediately Invoked Function Expression）？它的作用是什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

冷不防/ 2023年10月16日 18:28/ 0 赞/ 19 阅读

相关什么是JavaScript中的IIFE（Immediately Invoked Function Expression）？它的作用是什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ JavaScript中的IIFE ⭐ 示例 ⭐ 写在最后 --------------------

悠悠/ 2023年10月16日 12:48/ 0 赞/ 92 阅读

相关 1分钟了解 IIFE

1分钟了解 IIFE 1. 概念 2. 作用 3. 应用场景 4. 总结 1. 概

缺乏、安全感/ 2023年07月25日 12:46/ 0 赞/ 64 阅读

相关 JS中的(IIFE)(立即调用函数)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小灰灰/ 2023年01月22日 05:59/ 0 赞/ 60 阅读

相关 js的IIFE

IIFE:(Immediately-Invoked Function Expression)立即执行函数表达式作用：可以隐藏实现，不会影响全局命名空间,用它来编写js模块

ゝ一世哀愁。/ 2022年12月03日 15:51/ 0 赞/ 105 阅读

相关 std::function实现原理简述

实际上，每个function实例都根据函数类型的中返回值和参数类型推演出一个特例化，然后用类的成员变量去保留用这个函数类型的产生的函数指针，使用的时候实际上调用该类的小括号运算

灰太狼/ 2022年09月11日 08:28/ 0 赞/ 220 阅读

相关 window.onload 、$(function()function()）、;(function(){}());的执行顺序（初）

window.onload 、$(function()function()）、;(function()\{\}());三个的执行顺序： ;(function()\{\}

旧城等待，/ 2022年08月21日 11:55/ 0 赞/ 234 阅读

相关 (function ( ){...})( ) IIFE 的原理

你需要明白 IIFE 的原理，我简单说一下： function foo() {...} // 这是定义，Declaration；定义只是让解释器知道其存在，但是不会运

￡神魔★判官ぃ/ 2021年09月12日 02:14/ 0 赞/ 228 阅读

相关 IIFE理解

1. 定义 IIFE: Immediately Invoked Function Expression，意为立即调用的函数表达式，也就是说，声明函数的同时立即调用这个函数。

港控/mmm°/ 2021年09月01日 10:11/ 0 赞/ 319 阅读