理解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>