'JavaScript中函數表達式和自執行函數表達式的用法'

JavaScript是每個前端人員必須要掌握的知識點，在日常代碼中，我們經常都會用到自執行函數表達式。今天要給大家分享的就是JavaScript中函數表達式和自執行函數表達式的用法。

立即調用函數表達式

給函數體加大括號，在有變量聲明的情形下，沒有任何區別

但是，如果只是【自動執行】的情形下，就會不同

因為，一個匿名函數，不賦值或函數體不加小括號，是不能自動執行的

//以下情形並無差別
var count100 = function getCount100(){ return(100) }();//100
var count200 = (function getCount200(){ return(200) })();//200，加小括號和count100沒有區別
var count = (function getCount(n){ return(n) })(300);//300，傳參的情形
//不賦值變量，函數體加小括號，自動執行
(function aaa(){console.log("aaa")})();// aaa
console.log(aaa);//aaa is not defined
//一個匿名函數，函數體不加小括號，是不能自動執行的
function bbb(){console.log("bbb")}();//Unexpected token )

==實際上【自執行函數表達式】可以有很多複雜的情形==，比如下邊的複雜例子

//函數聲明置於小括號中，沒有自執行
( function fn(){console.log("aaa");return "bbb"} );
console.log("fn res is " + fn);// fn is not defined
//函數聲明置於小括號中，且自執行
( function fn(){console.log("aaa");return "bbb"}() );//輸出aaa
console.log("fn res is " + fn);// fn is not defined
//函數聲明置於小括號中，且自執行，注意，負責執行的一對小括號移到了外部
( function fn(){console.log("aaa");return "bbb"} )();//輸出aaa
console.log("fn res is " + fn);// fn is not defined
//函數聲明置於小括號中，函數未執行但將其賦值給fn
( fn = function aaa(){console.log("aaa");return "bbb"} )
console.log("fn res is " + fn());//fn res is bbb
//函數聲明置於小括號中，函數執行，並且將其賦值給fn
( fn = function aaa(){console.log("aaa");return "bbb"}() );//輸出aaa
console.log("fn res is " + fn);//fn res is bbb
//函數聲明置於小括號中，將其賦值給fn，並且在外部執行之(注意末尾小括號位置)
( fn = function aaa(){console.log("aaa");return "bbb"} )();//輸出aaa
console.log("fn res is " + fn());//再次輸出aaa，並輸出fn res is bbb
// 匿名函數在自執行，注意末尾小括號位置
( function(){console.log("aaa");return "bbb"} )();//輸出aaa
// 匿名函數在自執行，可見和上邊的例子效果一致
( function(){console.log("aaa");return "bbb"}() );//輸出aaa
//在括號外賦值的函數表達式，例一。以下三例的結果是一致的
var fn = function aaa(){return "bbb"}();
console.log("fn is res " + fn);//fn is res bbb
//例二
var fn = (function aaa(){return "bbb"})();
console.log("fn is res " + fn);//fn is res bbb
//例三
var fn = (function(){return "bbb"})();
console.log("fn is res " + fn);//fn is res bbb
-------
//正常的函數，注意fn的name屬性自動設置為fn
function fn(){return "bbb"};
console.log(fn.name);//fn
console.log("fn is res " + fn());//fn is res bbb
//函數表達式，注意fn的name屬性是fn
var fn = function(){return "bbb"};
console.log(fn.name);//fn
console.log("fn is res " + fn());//fn is res bbb
//函數表達式，注意fn的name屬性是aaa
var fn = function aaa(){return "bbb"};
console.log(fn.name);//aaa
console.log("fn is res " + fn());//fn is res bbb

對於如此多的不同情形，可以總結如下：

在不賦值的情形下，在小括號中的函數或者函數表達式，被阻止聲明為一個全局的變量，同時其內部是可執行的

但如果其在小括號中，被賦值給了某一變量，那麼該函數或者函數表達式就會被曝露出去，可以在外部調用

函數表達式在賦值給一個變量時，該變量會擁有一個name屬性，它的值取決於函數表達式是否為匿名函數

如果為匿名函數，則變量的name屬性值為自身，如果為具名函數，則變量的name屬性值為具名函數的name值

影響表達式執行的末尾的一對小括號，對詞法上的影響很小

即，影響函數表達式的因素，由大到小是： 賦值與否 => 匿名與否 => 何時執行

以上就是關於JavaScript中函數表達式和自執行函數表達式的用法，想要了解更多web前端的學習資料，可以關注“武漢千鋒”微信公眾號！