對匿名函數的深入理解

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

對匿名函數的理解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); //10console.log(a); //undefined

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

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

 

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

why?爲什麼下面這段代碼會報錯?

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)
}()


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章