免費(fèi)AI編程助手
JavaScript匿名函數(shù)的理解
js中匿名函數(shù)的N種寫法
匿名函數(shù)沒有實(shí)際名字，也沒有指針，怎么執(zhí)行滴？
其實(shí)大家可以看看小括號(hào)的意義就應(yīng)該可以理解。小括號(hào)有返回值，也就是小括號(hào)內(nèi)的函數(shù)或者表達(dá)式的返回值，所以說小括號(hào)內(nèi)的function返回值等于小括號(hào)的返回值，不難理解 (function(){})()可以將沒有名字的函數(shù)執(zhí)行了把…
關(guān)于匿名函數(shù)寫法，很發(fā)散~
最常見的用法：
(function() {
alert('water');
})();
當(dāng)然也可以帶參數(shù)：
(function(o) {
alert(o);
})('water');
想用匿名函數(shù)的鏈?zhǔn)秸{(diào)用？很簡單：
(function(o) {
alert(o);
return arguments.callee;
})('water')('down');
常見的匿名函數(shù)都知道了，看看不常見的：
~(function(){
alert('water');
})();//寫法有點(diǎn)酷~
void function(){
alert('water');
}();//據(jù)說效率最高~
+function(){
alert('water');
}();
-function(){
alert('water');
}();
~function(){
alert('water');
}();
!function(){
alert('water');
}();
(function(){
alert('water');
}());//有點(diǎn)強(qiáng)制執(zhí)行的味道~
JavaScript 匿名函數(shù)及閉包
1、匿名函數(shù)
函數(shù)是JavaScript中最靈活的一種對(duì)象，這里只是講解其匿名函數(shù)的用途。匿名函數(shù)：就是沒有函數(shù)名的函數(shù)。
1.1 函數(shù)的定義，首先簡單介紹一下函數(shù)的定義，大致可分為三種方式
第一種：這也是最常規(guī)的一種
function double(x){
return 2 * x;
}
第二種：這種方法使用了Function構(gòu)造函數(shù)，把參數(shù)列表和函數(shù)體都作為字符串，很不方便，不建議使用。
var double = new Function('x', 'return 2 * x;');
第三種：
var double = function(x) { return 2* x; }
注意“=”右邊的函數(shù)就是一個(gè)匿名函數(shù)，創(chuàng)造完畢函數(shù)后，又將該函數(shù)賦給了變量square。
1.2 匿名函數(shù)的創(chuàng)建
第一種方式：就是上面所講的定義square函數(shù)，這也是最常用的方式之一。
第二種方式：
(function(x, y){
alert(x + y);
})(2, 3);
這里創(chuàng)建了一個(gè)匿名函數(shù)(在第一個(gè)括號(hào)內(nèi))，第二個(gè)括號(hào)用于調(diào)用該匿名函數(shù)，并傳入?yún)?shù)。
2、閉包
閉包的英文單詞是closure，這是JavaScript中非常重要的一部分知識(shí)，因?yàn)槭褂瞄]包可以大大減少我們的代碼量，使我們的代碼看上去更加清晰等等，總之功能十分強(qiáng)大。
閉包的含義：閉包說白了就是函數(shù)的嵌套，內(nèi)層的函數(shù)可以使用外層函數(shù)的所有變量，即使外層函數(shù)已經(jīng)執(zhí)行完畢（這點(diǎn)涉及JavaScript作用域鏈）。
示例一
function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //這是一個(gè)匿名函數(shù)
, 2000);
}
checkClosure();
這個(gè)例子看上去十分的簡單，仔細(xì)分析下它的執(zhí)行過程還是有許多知識(shí)點(diǎn)的：checkClosure函數(shù)的執(zhí)行是瞬間的（也許用時(shí)只是0.00001毫秒），在checkClosure的函數(shù)體內(nèi)創(chuàng)建了一個(gè)變量str，在checkClosure執(zhí)行完畢之后str并沒有被釋放，這是因?yàn)閟etTimeout內(nèi)的匿名函數(shù)存在這對(duì)str的引用。待到2秒后函數(shù)體內(nèi)的匿名函數(shù)被執(zhí)行完畢,str才被釋放。
示例二，優(yōu)化代碼
function forTimeout(x, y){
alert(x + y);
}
function delay(x , y , time){
setTimeout('forTimeout(' + x + ',' + y + ')' , time);
}
/**
* 上面的delay函數(shù)十分難以閱讀，也不容易編寫，但如果使用閉包就可以讓代碼更加清晰
* function delay(x , y , time){
* setTimeout(
* function(){
* forTimeout(x , y)
* }
* , time);
* }
*/
3、舉例
匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。
示例三：
var oEvent = {};
(function(){
var addEvent = function(){ /*代碼的實(shí)現(xiàn)省略了*/ };
function removeEvent(){}
oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();
在這段代碼中函數(shù)addEvent和removeEvent都是局部變量，但我們可以通過全局變量oEvent使用它，這就大大減少了全局變量的使用，增強(qiáng)了網(wǎng)頁的安全性。 我們要想使用此段代碼：oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
示例四：
var rainman = (function(x , y){
return x + y;
})(2 , 3);
/**
* 也可以寫成下面的形式，因?yàn)榈谝粋€(gè)括號(hào)只是幫助我們閱讀，但是不推薦使用下面這種書寫格式。
* var rainman = function(x , y){
* return x + y;
* }(2 , 3);
*/
在這里我們創(chuàng)建了一個(gè)變量rainman，并通過直接調(diào)用匿名函數(shù)初始化為5，這種小技巧有時(shí)十分實(shí)用。
示例五：
var outer = null;
(function(){
var one = 1;
function inner (){
one += 1;
alert(one);
}
outer = inner;
})();
outer(); //2
outer(); //3
outer(); //4
這段代碼中的變量one是一個(gè)局部變量（因?yàn)樗欢x在一個(gè)函數(shù)之內(nèi)），因此外部是不可以訪問的。但是這里我們創(chuàng)建了inner函數(shù)，inner函數(shù)是可以訪問變量one的；又將全局變量outer引用了inner，所以三次調(diào)用outer會(huì)彈出遞增的結(jié)果。
4、注意
4.1 閉包允許內(nèi)層函數(shù)引用父函數(shù)中的變量，但是該變量是最終值
示例六：
/**
* <body>
* <ul>
* <li>one</li>
* <li>two</li>
* <li>three</li>
* <li>one</li>
* </ul>
*/
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
lists[ i ].onmouseover = function(){
alert(i);
};
}
你會(huì)發(fā)現(xiàn)當(dāng)鼠標(biāo)移過每一個(gè)<li&rt;元素時(shí)，總是彈出4，而不是我們期待的元素下標(biāo)。這是為什么呢？注意事項(xiàng)里已經(jīng)講了（最終值）。顯然這種解釋過于簡單，當(dāng)mouseover事件調(diào)用監(jiān)聽函數(shù)時(shí)，首先在匿名函數(shù)（ function(){ alert(i); }）內(nèi)部查找是否定義了 i，結(jié)果是沒有定義；因此它會(huì)向上查找，查找結(jié)果是已經(jīng)定義了，并且i的值是4（循環(huán)后的i值）；所以，最終每次彈出的都是4。
解決方法一：
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
};
})(i);
}
解決方法二：
var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){
lists[ i ].$$index = i; //通過在Dom元素上綁定$$index屬性記錄下標(biāo)
lists[ i ].onmouseover = function(){
alert(this.$$index);
};
}
解決方法三：
function eventListener(list, index){
list.onmouseover = function(){
alert(index);
};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
eventListener(lists[ i ] , i);
}
4.2 內(nèi)存泄露
使用閉包十分容易造成瀏覽器的內(nèi)存泄露，嚴(yán)重情況下會(huì)是瀏覽器掛死
Javascript中匿名函數(shù)的多種調(diào)用方式
Javascript中定義函數(shù)的方式有多種，函數(shù)直接量就是其中一種。如var fun = function(){},這里function如果不賦值給fun那么它就是一個(gè)匿名函數(shù)。好，看看匿名函數(shù)的如何被調(diào)用。
方式1，調(diào)用函數(shù)，得到返回值。強(qiáng)制運(yùn)算符使函數(shù)調(diào)用執(zhí)行
(function(x,y){
alert(x+y);
return x+y;
}(3,4));
方式2，調(diào)用函數(shù)，得到返回值。強(qiáng)制函數(shù)直接量執(zhí)行再返回一個(gè)引用，引用再去調(diào)用執(zhí)行
(function(x,y){
alert(x+y);
return x+y;
})(3,4);
這種方式也是很多庫愛用的調(diào)用方式，如jQuery，Mootools
方式3，使用void
void function(x) {
x = x-1;
alert(x);
}(9);
方式4，使用-/+運(yùn)算符
-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);
最后看看錯(cuò)誤的調(diào)用方式
function(x,y){
alert(x+y);
return x+y;
}(3,4);
更多建議：