理解javascript中的當即執行函數(function(){})()

時間 2019-12-13

標籤理解 javascript 當即執行函數 function 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxxxx</title>
</head>

<body style="background: #023365">

</body>

<script type="text/javascript">
    
    
    Aoo();//不報錯
    //函數聲明
    function Aoo(){
        console.log("Aoo");
    }
    
    
    /**
    Boo();//報錯Boo is not a function,應該放在函數表達式以後。
    //函數表達式
    var Boo = function(){
        console.log("Boo");
    }
    */
    
    //在函數表達式以後加上括號以後，能夠不用調用Coo方法
    //Coo()方法，COO方法都會自動執行
    var Coo = function(){
        console.log("Coo");
    }();
    
    
    //匿名函數以後不能添加括號，不然將會報錯
    //function statement requires a name
    /**
    function(){
        console.log("Doo");
    }()
    */
    
    
    /*當即執行函數裏面的函數必須是函數表達式，
      因此由var Coo = function() {}()能夠理解
      爲在匿名函數前加了 = 運算符後，將函數聲明轉化
      爲函數表達式，因此拿！，+，-，（）...等運算符來測試下是否如此*/
    //注意：如下將申明函數轉爲函數表達式要加";"不然會出現
    //報錯：intermediate value)(...) is not a function
    
    !function(){
        console.log(1)
    }();
        
    +function(){
        console.log(2)
    }();
        
    -function(){
        console.log(3)
    }()
        
    (function(){
        console.log(4)
    })()
    
    
    /*因而可知，加運算符確實可將函數聲明轉化爲函數表達式，
    而之因此使用括號，是由於括號相對其餘運算符會更安全，
    能夠減小沒必要要的麻煩。當即執行函數與正常函數傳參形式是一致的。*/
    var Eoo = function(var1,var2){
        console.log("Eoo:"+var1+var2);
    }(1,3);
    
    
    /*(function(){}())這樣寫的好處是在內部定義的變量
    不會跟外部的變量有衝突，達到保護內部變量的做用。*/
    
</script>
</html>