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

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

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

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

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

那么为什么要 IIFE？

传统的方法啰嗦，定义和执行分开写；
传统的方法直接污染全局命名空间（浏览器里的 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 对象

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

仿函数（functors/function objects）原理及使用
仿函数(functors,或名 function objects,函数对象),是 STL 六大组件(Components)的重要一环,如下图: 在STL的历史上,仿函数(functors)是早期的命名 ...
js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 有区别?
在SF上看到这样一个问题,我觉得问得很好,所以弄成文章收集了. 没有区别. 你需要明白 IIFE 的原理,我简单说一下: function foo() {...} // 这是定义,Declaratio ...
编译原理实验：代码生成作业（1）
编译原理实验4:中间代码生成实验包-C++文档类资源-CSDN下载编译原理实验4:中间代码生成实验包更多下载资源.学习资料请访问CSDN下载频道.https://download.csdn.net/d ...
JavaScript中的IIFE
1. 定义 IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数. 对比一下,这是不采用IIF ...
详解 JavaScript 的 IIFE 语法
详解 JavaScript 的 IIFE 语法 IIFE 语法 IIFE 语法的一些变体小括号去哪儿了? 命名的 IIFE 防止连接文件时出现问题使用箭头函数代替函数表达式一些不推荐的立即调用函 ...
什么是 IIFE（立即调用函数表达式）？
它是立即调用函数表达式(Immediately-Invoked Function Expression),简称 IIFE.函数被创建后立即被执行: (function IIFE(){console.l ...
JavaScript夯实基础系列（二）：闭包
在JavaScript中函数是一等公民.所谓一等公民是指函数跟其他对象一样,很普通,可以进行把函数存在数组中.作为参数传递.赋值给变量等操作.当函数作为另一个函数的返回值在外部调用时,跟该函数在函 ...
闭包应用之延迟函数setTimeout
根据HTML 5标准,setTimeout推迟执行的时间,最少是5毫秒.如果小于这个值,会被自动增加到5ms. 每一个setTimeout在执行时,会返回一个唯一ID,把该ID保存在一个变量中,并传入 ...
详细理解JS的三座大山
如图所示,JS的三座大山: 同步.异步作用域.闭包原型.原型链 1. 同步.异步 JavaScript执行机制,重点有两点: JavaScript是一门单线程语言 Event Loop(事件循环) ...

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

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

最新文章

热门文章