javascript中的立即执行函数(function(){})()

半兽人 发表于: 2018-11-25   最后更新时间: 2018-12-15 11:48:01  
{{totalSubscript}} 订阅, 3,197 游览

格式:

(function(window, undefined){})(window)

要理解立即执行函数(function(){})(),首先要了解些函数的基本概念(函数声明、函数表达式、匿名函数)。

函数声明

使用function声明函数,并指定函数名。 

function setFn() {
    // coding   
}

函数表达式

使用function声明函数,但未指定函数名,将匿名函数赋予一个变量。

var setFn = function() {
    // coding
}

匿名函数

使用function关键字声明函数,但未指定函数名。匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

function() {
    // coding
}

函数声明与函数表达式的不同在于:

  1. 函数声明可在当前作用域下提前调用执行,函数表达式需等执行到该函数后,方可执行,不可提前调用。

     setFn()
     function setFn() {
         // coding  
     }
     // 正常,函数声明可提前调用
    
     setFn()
     var setFn = function() {
         // coding
     }
     // 报错,setFn未保存对函数的引用,函数调用需放在函数表达式后面
    
  2. 函数表达式可直接在函数后加括号调用。

     var setFn = function() {
         console.log(2)
     }()
    
     // 2   解析至此,可直接执行调用
    

立即执行函数(function(){})()可以看出很像函数表达式的调用,但为什么要加括号呢?如果不加括号:

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

// 报错,函数需要函数名

解析: 虽然匿名函数属于函数表达式,但未进行赋值,所以javascript解析时将开头的function当做函数声明,故报错提示需要函数名

立即执行函数里面的函数必须是函数表达式,所以由var setFn = function(){}()可以理解为在匿名函数前加了=运算符后,将函数声明转化为函数表达式,所以拿!,+,-,()...等运算符来测试下是否如此。

!function(){
    console.log(1)
}()
// 1

+function(){
    console.log(2)
}()
// 2

-function(){
    console.log(3)
}()
// 3

(function(){
    console.log(4)
})()
// 4

由此可见,加运算符确实可将函数声明转化为函数表达式,而之所以使用括号,是因为括号相对其他运算符会更安全,可以减少不必要的麻烦。

立即执行函数与正常函数传参形式是一致的。

(function(a, b){
    console.log(a + b);
})(1, 2)
// 3

(function(){}())这样写的好处是在内部定义的变量不会跟外部的变量有冲突,达到保护内部变量的作用。

更新于 2018-12-15

查看javascript更多相关的文章或提一个关于javascript的问题,也可以与我们一起分享文章