首頁  >  文章  >  web前端  >  如何理解JS匿名函數

如何理解JS匿名函數

小云云
小云云原創
2018-03-19 16:24:221373瀏覽

匿名函數的基本形式為(function(){...})();前面的括號包含函數體,後面的括號就是給匿名函數傳遞參數並立即執行之匿名函數的作用是避免全域變量的污染以及函數名的衝突。

1.小括號的作用

小括號能把我們的表達式組合分塊,並且每一塊,也就是每一對小括號,都有一個回傳值。這個回傳值其實也就是小括號中表達式的回傳值。所以,當我們用一對小括號把匿名函數括起來的時候,實際上小括號對回傳的,就是一個匿名函數的Function 物件。因此,小括號對加上匿名函數就如同有名字的函數般被我們取得它的引用位置了。所以如果在這個引用變數後面再加上參數列表,就會實作普通函數的呼叫形式。

簡單來說就是小括號有回傳值,也就是小括號內的函數或是表達式的回傳值,所以說小括號內的function回傳值等於小括號內的函數或是表達式的回傳值,所以說小括號內的function回傳值等於小括號內的回傳值

2.匿名函數的寫法

方式1,呼叫函數,得到回傳值。強制運算子使函數呼叫執行

(function(x,y){

alert(x+y);

return x+y;

#}(3,4)); 

方式2,呼叫函數,得到回傳值。強制函數直接量執行再回傳一個引用,引用再去呼叫執行

(function(x,y){

alert(x+y);

return x +y;

})(3,4); 

這個方式也是許多函式庫愛用的呼叫方式,如jQuery,Mootools。

方式3,使用void

void function(x) {

x = x-1;

alert(x);

}(9);

方式4,使用-/+運算子

-function(x,y){

alert(x+y);

return x+y;

}(3,4);

#+function(x,y){

alert(x+y);

return x+y;

}(3,4);

#--function(x,y){

#alert(x+y );

return x+y;

}(3,4);

++function(x,y){

alert(x +y);

return x+y;

}(3,4); 

方式5,使用波浪符號(~)

##~ function(x, y) {

alert(x+y);

#return x+y;

}(3, 4); 

#方式6,匿名函數執行放在中括號內

[function(){

console.log(this) // 瀏覽器得控制台輸出window

#} (this)] 

方式7,匿名函數前加typeof

typeof function(){

console.log(this) // 瀏覽器得控制台輸出window

}(this) 

方式8,匿名函數前加delete

#delete function(){

console.log(this) // 瀏覽器得控制台輸出window

}(this) 

方式9,匿名函數前加void

void function(){

console.log (this) // 瀏覽器得控制台輸出window

}(this) 

方式10,使用new方式,傳參

new function(win){

console.log(win) // window

}(this) 

方式11,使用new,不傳參

new function(){

console.log(this) // 這裡的this就不是window了

方式12,逗號運算子

# function(){

console.log(this) // window

}(); 

方式13,位元異或運算子

#^function() {

console.log(this) // window

}(); 

方式14,比較運算子

function(){

console.log(this) // window

}(); 

最後來看看錯誤的呼叫方式

function(x,y){

alert(x+y);

return x+y;

#}(3,4); 

匿名函數的N種寫法如下所示

匿名函數沒有實際名字,也沒有指針,怎麼執行?

關於匿名函數寫法,很發散~ 

+號碼是讓函數宣告轉換為函數表達式。總結一下

最常見的用法: 

程式碼如下:

(function() { 

#alert('water'); 

})(); 

當然也可以帶參數: 

程式碼如下:

(function(o) { 

alert(o) ; 

})('water'); 

想用匿名函數的鍊式呼叫?很簡單: 

程式碼如下:

(function(o) { 

console.log(o); 

return arguments.callee; 

})('water')('down'); 

常見的匿名函數都知道了,看看不常見的: 

程式碼如下:

~(function(){ 

alert('water'); 

})();//寫法有點酷~ 

程式碼如下:

void function(){ 

alert('water'); 

}();//據說效率最高~ 

程式碼如下:

+function(){ 

alert('water'); 

#}(); 

程式碼如下:

##-function(){

alert('water'); 

}();

程式碼如下:

~function(){ 

#alert ('water'); 

}();

程式碼如下:

!function(){ 

alert('water'); 

}(); 

程式碼如下:

(function(){ 

alert('water'); 

}());//有點強制執行的味道~

相關建議:

PHP回呼函數及匿名函數詳解

JS匿名函數概念與用法分享

PHP匿名函數與匿名類別詳解

以上是如何理解JS匿名函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn