JS小知识——立即执行函数

立即执行函数有哪些？

在JavaScript中，一般情况下定义一个函数需要给这个函数命名，或者创建一个变量接受一个函数，以方便之后调用。如果我们不需要一个命名的函数，那么通常会使用立即执行函数（IIFE）来解决我们的问题，同时，立即执行函数有时候可以帮我们解决某些闭包问题。

例如

function test(){
    var arr = [];
    for(var i=0;i<5;i++){
        arr[i] = function(){
           console.log(i);       
        }                                        
    } 
    return arr;
} //test()执行后返回一个数组，每一项为一个函数
复制代码

test().forEach((item)=>{
	item()
})  // 输出 5 5 5 5 5
复制代码

如果我们想要让test执行后的数组每一项返回对应的i值，可以通过立即执行函数解决

function test(){
    var arr = [];
    for(var i=0;i<5;i++){
        (function(i){
            arr[i] = function(){
               console.log(i)       
            }                                      
        })(i)
    }
    return arr;
}
复制代码

test().forEach((item)=>{
	item()
}) //输出0 1 2 3 4
复制代码

这是立即执行函数的一个应用，可以帮助我们解决部分闭包问题，还有很多用途，比如避免变量污染，隔离作用域。最著名的还是jQuery的应用了。那么立即执行函数有多少种写法呢？

常见两种形式

通过( )包裹函数体在通过( )执行函数

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

这两种方式等价，通过把匿名函数体变成表达式后自执行。

通过位运算符

3. ~function(){console.log(3)}()
4. -function(){console.log(4)}()
5. +function(){console.log(5)}()
6. !function(){console.log(6)}()

这四种方式通过位运算符把函数体变成表达式之后执行会导致返回的结果发生不同。并且压缩代码后产生恐怖效应所以基本不推荐使用，还有一些赋值运算

7. var a = function(){console.log(7)}() 会导致函数自执行,包括一些逻辑运算符

8. 1 && function(){console.log(8)}()

9. 0 || function(){console.log(9)}() 甚至包括 new （毕竟ta也是一个运算符）也会导致函数的自执行！

在实际开发中，为了防止代码压缩导致1，2方式与值钱的代码发生不清不楚的关系，一般会选择在立即执行函数之前添上 '；'。不过一般在使用时很少会接收返回值，还有一个更好的推荐--void运算符。

10. void function(){console.log(10)}()

通过void 满足我们不用始终记得添加 ; 的痛苦~~。

OK 除了两种常见的运用方式，有没有觉得知道的更多了点呢。

有问题也不给你联系我

转载于:https://juejin.im/post/5c9a2906e51d45192446a202