對匿名函數的深入理解（徹底版） - pssp－IT工程師數位筆記本

文章出處

從簡單的字面理解就是一個沒有名字的函數，但是如果說它只是這樣簡單，那我也就沒有必要來說這些。

對匿名函數的理解1：

function(){
    console.log(1); 
}
// 報錯

不能直接使用。

對匿名函數的理解2：

var a = function(){
    console.log(1);
}
a(); //1

匿名函數可以依附于一個變量，并且這個變量名就是這個匿名函數的名字。

var a = function(){
    console.log(1);
}
console.log(typeof a); //function

對匿名函數的理解3：

window.onload = function(){
    console.log("匿名函數");
}
// 匿名函數

當匿名函數用在綁定事件中的時候，當這個事件執行的時候這個匿名函數也會被執行。

對匿名函數的理解4：

(function(){
    console.log("追夢子");
})()
// 追夢子

如果將匿名函數放入到表達式中并且后面加上小括號會自動執行這個函數

對匿名函數的理解5：

var a = function(){
    console.log("自執行函數");
}();
// 自執行函數

匿名函數后面加括號會執行這個函數。

對匿名函數的理解6：

function(){
    console.log(1);
}();
// 報錯

匿名函數必須依附一個變量。

對匿名函數的理解7：

var a = {
    fn:function(){
        console.log(1);
    }
}
a.fn(); //1

匿名函數不只是可以依附于一個變量，也可以依附于一個對象的屬性。

對匿名函數的理解8：

var a = {
    fn:function(){
        console.log("追夢子");
    }()
} //追夢子

同樣的匿名函數當做一個對象的屬性時也可以自調用。

對匿名函數的理解9：

var a = function(b){
    console.log(b)
}
a(52); //52

匿名函數也可以傳遞參數

對匿名函數的理解10：

(function(a){
    console.log(a);
})(10) //10

對于表達式函數同樣也可以傳遞參數

對匿名函數的理解11：

var a = function(b){
    console.log(b);
}(10); //10
console.log(a); //undefined

如果將一個自執行的匿名函數并且沒有返回值，賦值給一個變量那么這個變量的值就是undefined。因為這個函數在賦值之前已經執行完了，而這個函數沒有返回值，所以就是undefined，如果有返回值，那么這個變量的值就是那個匿名函數的返回值。

var a = function(b){
    return b;
}(10);
console.log(a); //10

這里對匿名函數的講解就到此結束，下面說一下關于自執行的匿名函數問題。

why？為什么下面這段代碼會報錯？

function(){
    console.log(1);
}
// 報錯

　　1、因為ECAMScript規定函數的聲明必須要有名字，如果沒有名字的話，我們就沒有辦法找到它了，對于為什么自執行函數為什么就可以不帶名字后面會講。

　　2、如果沒有名字必須要有一個依附體，如：將這個匿名函數賦值給一個變量。

如果按照上面的說法js報錯也是應該的，那么我們用的下面這種代碼為什么就能夠正常運行？

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

　　之所以可以是因為我們將這個函數包含在了一個小括號中，why？小括號為什么這么神奇？

按照ECAMScript的規定，函數聲明是必須要有名字的，但是我們用括號擴起來那么這個函數就不再是一個函數聲明了，而是一個函數表達式，你可以理解成下面這段代碼。

var a = function(){
    console.log(1);
}(); //1

　　將一個匿名函數賦值給一個變量或者對象屬性就是函數表達式，函數表達式是可以不需要名字的，所以我們就可以直接通過這種方式來自動的執行這個函數。

再說一句

(function(){
    ....
})()

第一個括號是個運算符，它會返回這個匿名函數，然后最后一個小括號會執行這個函數。

總結也就是說只要是表達式就可以直接執行它，并且不需要函數名，那么我們還可以這樣調用它。

-function(){
    console.log(1);
}()
+function(){
    console.log(2);
}()
~function(){
    console.log(3);
}()
!function(){
    console.log(4);
}()
&function(){
    console.log(5);
}()
|function(){
    console.log(6);
}()
/function(){
    console.log(7);
}()
/function(){
    console.log(8)
}()
%function(){
    console.log(9)
}()
typeof function(){
    console.log(10)
}()
null==function(){
    console.log(11)
}()
0==function(){
    console.log(12)
}()
0!=function(){
    console.log(13)
}()
0>function(){
    console.log(14)
}()
0<function(){
    console.log(15)
}()
0-function(){
    console.log(16)
}()