JavaScript之深入理解立即调用函数表达式（IIFE），你对它的理解，决定了它的出镜率（系列六）

矫情吗；* 2023-02-18 14:09 7阅读 0赞

# 立即调用函数 #

> 本篇文章，主要讲解的立即执行函数或自执行匿名函数的含义、用法、以及使用它的主要场景。系列的前面几篇文章主要讲解了作用域、原型、执行上下文，本篇文章一样起到了承上启下的作用，如果您感兴趣，不妨去看看哦～ [传送门][Link 1]

## 目录 ##

*  一、了解立即调用函数表达式
 *  二、立即调用函数表达式报错了？
 *  三、使用立即调用函数的正确姿势
 *  四、常见使用场景
 *  写在最后

## 一、了解立即调用函数表达式 ##

##### 1.1 思维导图 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]

##### 1.2 什么是立即调用？ #####

在详细了解这个之前，我们来谈了解一下“自执行”这个叫法，本文对这个功能的叫法也不一定完全对，每个人对他的理解都不一样，我们在这里用`立即调用`～

立即调用：

*  顾名思义，该表达式一被`创建就立即执行`。
 *  是一个在定义时就会立即执行的 `JavaScript 函数`。

(function (x) { 
        console.log('x + x = ', x + x);
    })(5) // x + x = 10

这是一个被称为 `自执行匿名函数` 的设计模式，主要包含两部分:

1.  第一部分是包围在 圆括号运算符 `()` 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。
2.  第二部分再一次使用 `()` 创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。

##### 1.3 核心问题 #####

**当你声明一个函数的时候，通过在后面加括号就可以实现立即执行吗？**

很显然，例子中的第二条和第三条确实报错了，而且报错内容不一样，那么问题出现在哪呢？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]

## 二、立即调用函数表达式报错了？ ##

有时，我们定义函数之后，立即调用该函数，这时不能在函数的定义后面直接加圆括号，这会产生语法错误。产生语法错误的原因是，`function` 这个关键字，既可以当做语句，也可以当做表达式，比如下边：

//语句
    function fn() { };
    
    //表达式
    var fn = function (){ };

为了避免解析上的歧义，JS引擎规定，如果function出现在行首，一律解析成语句。因此JS引擎看到行首是function关键字以后，认为这一段都是函数定义，不应该以`括号结尾`，在它看来`括号`只是分组操作符。

// 下面这个function在语法上是没问题的，但是依然只是一个语句
    // 加上括号()以后依然会报错，因为分组操作符需要包含表达式
     
    function foo(){  /* code */ }(); // SyntaxError: Unexpected token )
     
    // 但是如果你在括弧()里传入一个表达式，将不会有异常抛出
    // 但是foo函数依然不会执行
    function foo(){  /* code */ }( 1 );
     
    // 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式： 
    function foo(){  /* code */ }
     
    ( 1 );

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 2]

## 三、使用立即调用函数的正确姿势 ##

要解决上述问题，非常简单。

我们只需要用`大括弧`将代码的代码全部括住就行了，因为JavaScript里`括弧()`里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明。

##### 3.1 常见使用姿势 #####

// 下面2个括弧()都会立即执行
    
    (function () {  /* code */ } ()); // 推荐使用这个
    (function () {  /* code */ })(); // 但是这个也是可以用的

##### 3.2 不常见的使用姿势（一） #####

// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
    // 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
    
    var i = function() { 
        console.log('余光')
    }(); // 余光
    
    true && function() { 
        console.log('余光')
    }(); // 余光
    
    0, function() {  console.log('余光') }(); // 余光

##### 3.3 不常见的使用姿势（二） #####

// 如果你不在意返回值，或者不怕难以阅读
    // 你甚至可以在function前面加一元操作符号
    
    //转bool
    var res1 = !function () { 
        console.log('余光');
    }()
    console.log('res1:', res1); // 余光 true
    
    // 转数字
    var res2 = +function () { 
        console.log('余光');
    }()
    console.log('res2:', res2); // 余光 NaN
    
    // 按位非
    var res3 = ～function () { 
        console.log('余光');
    }()
    console.log('res3:', res3); // 余光 NaN

##### 3.4 不常见的使用姿势（三） #####

还有一个情况，使用new和void关键字，不过不太常见罢了。

void function() { 
        console.log('余光');
    }();
    
    new function() { 
        console.log('余光');
    }();

## 四、常见使用场景 ##

##### 4.1 隔离作用域 #####

IIFE最常见的功能，就是隔离作用域，在ES6之前JS原生也没有块级作用域的概念，所以需要函数作用域来模拟。

举例:

var currentTime = (function () { 
        var time = new Date();
        var year  = time.getFullYear()
        var month = time.getMonth()+1;
        var date  = time.getDate();
        var hour  = time.getHours();
        var min   = time.getMinutes();
        return year + '-' + month + '-' + date + ' ' + hour + ':' + min;
    })()

你仍然可以在其他地方声明同名变量～

##### 4.2 惰性函数 #####

DOM事件添加中，为了兼容现代浏览器和IE浏览器，我们需要对浏览器环境进行一次判断：

##### 4.3 用闭包保存状态 #####

这里我仅举个例子，为我的下一篇文章——《JavaScript中的闭包》卖个关子

##### 注意 #####

当函数变成立即执行的函数表达式时，表达式中的变量不能从外部访问。

(function () {  
        var name = "Barry";
    })();
    // 无法从外部访问变量 name
    name // 抛出错误："Uncaught ReferenceError: name is not defined"

将 IIFE 分配给一个变量，不是存储 IIFE 本身，而是存储 IIFE 执行后返回的结果。

var result = (function () {  
        var name = "Barry"; 
        return name; 
    })(); 
    // IIFE 执行后返回的结果：
    result; // "Barry"

## 参考 ##

*  [ 《为什么要有js立即执行函数，存在的意义是什么？》][_js]
 *  [IIFE（立即调用函数表达式）][IIFE]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 3]

## 写在最后 ##

**JavaScript内功系列：**

1.  [this、call、apply详解，系列（一）][this_call_apply]
2.  [从原型到原型链，系列（二）][Link 2]
3.  [从作用域到作用域链，系列（三）][Link 3]
4.  [JavaScript中的执行上下文（四）][JavaScript]
5.  [JavaScript中的变量对象（五)][JavaScript 1]
6.  本文
7.  JavaScript中的闭包

**关于我**

*  花名：余光
 *  WX：j565017805
 *  沉迷JS，水平有限，虚心学习中

**其他沉淀**

*  [JavaScript版LeetCode题解][JavaScript_LeetCode]
 *  [前端进阶笔记][Link 4]
 *  [CSDN][]

如果您看到了最后，不妨收藏、点赞、评论一下吧！！！  
持续更新，您的三连就是我最大的动力，虚心接受大佬们的批评和指点，共勉！

![20200602155947301.png][]

[Link 1]: https://blog.csdn.net/jbj6568839z/category_10069610.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200622113604893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200622113720823.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200622113818808.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6,size_16,color_FFFFFF,t_70#pic_center
[_js]: https://www.zhihu.com/question/35832285?sort=created
[IIFE]: https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200622125329530.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6,size_16,color_FFFFFF,t_70#pic_center
[this_call_apply]: https://blog.csdn.net/jbj6568839z/article/details/106479511
[Link 2]: https://blog.csdn.net/jbj6568839z/article/details/106555301
[Link 3]: https://blog.csdn.net/jbj6568839z/article/details/106618708
[JavaScript]: https://blog.csdn.net/jbj6568839z/article/details/106668345
[JavaScript 1]: https://blog.csdn.net/jbj6568839z/article/details/106793254
[JavaScript_LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 4]: https://webbj97.github.io/summary/
[CSDN]: https://yuguang.blog.csdn.net/
[20200602155947301.png]: https://img-blog.csdnimg.cn/20200602155947301.png