胡扯JS系列-匿名函式的自動執行

pangsir8983發表於2019-02-16
JS函式

image

函式有很多種，我們就選擇我們不懂的函式開始學習！

JS中自動執行的匿名函式

在JavaScript中可以使用匿名函式（在我們學習Java的時候也有類似的概念，匿名實現類），在JavaScript中的函式也是一種物件，也是需要一塊記憶體對其進行儲存。如果想呼叫該函式，我們只是需要找到這塊記憶體即可，然後就可以執行。關鍵步驟如下：

  • 將函式物件儲存到一塊記憶體當中
  • 找到這塊記憶體

通常我們使用函式名來查詢這塊地址，不過通過函式名只是找到這塊記憶體地址的一種工具而已。

function test01(){

    console.log("定義方式");
}
//函式的呼叫
test01();

var test02 = function () {
    console.log("變數方式");
}
//函式的呼叫
test02();

上述的示例，我們就是通過函式名找到了這塊記憶體地址，在使用()進行函式的執行，也就是隻要我們能找到這塊記憶體就可以去執行！

匿名函式，顧名思義就是沒有名字的函式，其實在上面寫的test02函式表示式中，我們就建立了匿名函式，並將該函式賦值給了變數test02，用test02來進行函式的呼叫，呼叫方式就是在變數test02後面加入小括號，這是匿名函式的呼叫方式之一

還有一種匿名函式的呼叫規則如下：

  • 第一步：使用function關鍵字定義一個函式

  • 第二步：使用小括號將內容括起來

    關鍵步驟：這只是一種語法的要求，否則後面的執行語句無法被引擎正確的識別，如果這樣將函式定義好，引擎就會為其分配一塊記憶體儲存

  • 第三步：直接在後面加入小括號完成呼叫，可以放入引數
(function (x, y) {
    console.log(x+y);
})(2, 3);
//等價於程式碼
var test03 = function(x,y){
    console.log(x+y);
}(2,3);

程式碼分析

var log=(function(){
    console.log("建立日誌函式");
    return function(param){
        console.log(param);
    };
})();
log("www.baidu.com");

這段程式碼屬於一種比較經典的程式碼，這裡建立了一個自動執行的匿名函式，不過其返回值仍然是一個匿名函式，也就是說函式自執行後返回的結果仍然是函式。把返回值的函式賦值給變數log，就可以使用log變數來呼叫返回的函式了。

請注意上述程式碼中，我們其實是包含兩塊記憶體儲存函式，自動執行的函式本身有一塊記憶體來儲存，當碰到後面表示執行的小括號後會自動執行，另外還有一塊記憶體來儲存所返回的函式，而返回的值其實是這塊記憶體地址，這樣log變數就指向了這塊儲存函式的記憶體，因此可以使用log來完成對函式的執行。

一些有趣的自執行函式的定義方式

// 下面2個括弧()都會立即執行  
(function () { /* code */ } ()) // 推薦使用這個  
(function () { /* code */ })() // 但是這個也是可以用的  
  
// 由於括弧()和JS的&&，異或，逗號等操作符是在函式表示式和函式宣告上消除歧義的  
// 所以一旦解析器知道其中一個已經是表示式了，其它的也都預設為表示式了  
var i = function () { return 10; } ();  
true && function () { /* code */ } ();  
0, function () { /* code */ } ();  
  
// 如果你不在意返回值，或者不怕難以閱讀
// 你甚至可以在function前面加一元操作符號  
!function () { /* code */ } ();  
~function () { /* code */ } ();  
-function () { /* code */ } ();  
+function () { /* code */ } ();  
  
// 還有一個情況，使用new關鍵字,也可以用，但我不確定它的效率  
// http://twitter.com/kuvos/status/18209252090847232  
new function () { /* code */ }  
new function () { /* code */ } () // 如果需要傳遞引數，只需要加上括弧()  

void function(){  /* code */  }();

相關文章