js立即执行函数

矫情吗；* 2022-12-29 09:21 192阅读 0赞

### 文章目录 ###

*  一、什么是立即执行函数
 *  二、立即执行函数的写法
 *  三、使用立即执行函数的好处
 *  四、注意点
 *  五、扩展一道经典的面试题

# 一、什么是立即执行函数 #

顾名思义，声明一个函数并马上调用这个函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行；立即执行函数又叫做自执行函数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]

# 二、立即执行函数的写法 #

立即执行函数的写法有三种：

( function ( “ 参数 ” ) { " 函数方法 " ; } ) ( “ 给参数传的值 ” )
    ( function ( " 参数 " ) { “ 函数方法 ” ; } ( " 给参数传的值 " ) )
    ! function ( " 参数 " ) { " 函数方法 " ; } ( " 给参数传的值 " )　 
    // ! 可以换作 void 或其他运算符（比如 +，-，= 等，都能起到立即执行的作用）

立即执行函数是很自私的，它的内部可以访问全局变量。但是除了它自身内部，外部是无法访问它的。

function aaa(a,b){ 
        return sum = a + b;
    }
    (function bbb(a,b){ 
        return sum = a + b;
    }(1, 2))
    console.log(aaa)
    console.log(bbb)

上面代码中，是一个普通函数与一个立即执行函数，输出这两个函数会发现：普通函数aaa被全部打印出来，而打印立即执行函数bbb却报错。返回结果：  
![在这里插入图片描述][20201221164351814.png]  
立即执行函数相当于一个瓶口朝下的杯子，当定义它的时候，它会倾斜，把杯口露出来，吸收外面的新鲜空气；当它执行完毕，杯口不再外露，紧闭起来，与外界再无关联。

# 三、使用立即执行函数的好处 #

通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可，如jQuery代码结构：

(function (window) { 
    	// jquery code
    })(window);

其中window即是全局对象。**作用域隔离**非常重要，是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

# 四、注意点 #

前面介绍了3种立即执行函数的写法，使用前两种写法的立即执行函数，它们的前一个函数必须要有分号。

举个栗子：

(function (a){ 
      console.log(a)
    })(1)
    (function (a){ 
      console.log(a)
    }(2))

ECMAScript规范具有分号自动插入规则，但是在上面代码中，在第一个立即执行函数末尾却不会插入“；”，因此上面代码会被解释为如下形式：

(function (a){ 
      console.log(a)
    })(1)(function (a){ 
      console.log(a)
    }(2));

此时浏览器报错：  
![在这里插入图片描述][20201221165218279.png]  
因此，立即执行函数前的一个函数必须要有分号，保险起见，可以直接在立即执行函数的前面添加“；”

;(function (a){ 
      console.log(a)
    })(1);
    
    (function (a){ 
      console.log(a)
    }(2));

# 五、扩展一道经典的面试题 #

**非匿名自执行函数，函数名只读**

看看下面代码输出什么？

var b = 10;
    (function b(){ 
        b = 20
        console.log(window.b)
        console.log(b)
    })()

输出：  
![在这里插入图片描述][20210104175623244.png]  
再扩展一下：

var b = 10;
    (function b(){ 
        console.log(b)
        b = 5
        console.log(window.b)
        var b = 20
        console.log(b)
    })()

输出：  
![在这里插入图片描述][20210104175007902.png]  
上面代码中，第一个值undefined，是因为下面有 var b = 20，var声明会提升到function最开头，但赋值发生在最后，function里面的代码等价于：

var b
    	console.log(b)
    	b = 5
    	console.log(window.b)
    	b = 20
    	console.log(b)

END

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20221120/ba1a089b27ef4b28a766a9d5a4eca422.png
[20201221164351814.png]: /images/20221120/c8d7a82f894e48ba8d1101a6fd05f590.png
[20201221165218279.png]: /images/20221120/a63dfe5e9b024b849c9ec2d21c361ec1.png
[20210104175623244.png]: /images/20221120/03a354aa19b341318e25d9da5b8f36be.png
[20210104175007902.png]: https://img-blog.csdnimg.cn/20210104175007902.png