首頁 > 開發者 > JavaScript
標籤：cin code 代碼 建立 例子 返回 elements keyword add
第一種：這也是最常規的一種
| 123 | function double(x){ return 2 * x; } |
第二種：這種方法使用了Function建構函式，把參數列表和函數體都作為字串，很不方便，不建議使用。
| 1 | var double = new Function(‘x‘, ‘return 2 * x;‘); |
第三種：
| 1 | var double = function(x) { return 2* x; } |
注意“=”右邊的函數就是一個匿名函數，創造完畢函數後，又將該函數賦給了變數square。
匿名函數的建立
第一種方式：就是上面所講的定義square函數，這也是最常用的方式之一。
第二種方式：
| 123 | (function(x, y){ alert(x + y); })(2, 3); |
這裡建立了一個匿名函數(在第一個括弧內)，第二個括弧用於調用該匿名函數，並傳入參數。括弧是運算式，是運算式就有傳回值，所以可以在後面加一對括弧讓它們執行.
自執行的匿名函數
1. 什麼是自執行的匿名函數?
它是指形如這樣的函數: (function {// code})();
2. 疑問
為什麼(function {// code})();可以被執行, 而function {// code}();卻會報錯?
3. 分析
(1). 首先, 要清楚兩者的區別:
(function {// code})是運算式, function {// code}是函式宣告.
(2). 其次, js"先行編譯"的特點:
js在"先行編譯"階段, 會解釋函式宣告, 但卻會忽略表式.
(3). 當js執行到function() {//code}();時, 由於function() {//code}在"先行編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;
當js執行到(function {// code})();時, 由於(function {// code})是運算式, js會去對它求解得到傳回值, 由於傳回值是一 個函數, 故而遇到();時, 便會被執行.
另外， 函數轉換為運算式的方法並不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
如：
| 123 | !function(){ alert("另類的匿名函數自執行"); }(); |
匿名函數與閉包
閉包的英文單詞是closure，這是JavaScript中非常重要的一部分知識，因為使用閉包可以大大減少我們的代碼量，使我們的代碼看上去更加清晰等等，總之功能十分強大。
閉包的含義：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變數，即使外層函數已經執行完畢（這點涉及JavaScript範圍鏈）。
| 1234567 | function checkClosure(){ var str = ‘rain-man‘; setTimeout( function(){ alert(str); } //這是一個匿名函數 , 2000); } checkClosure(); |
這個例子看上去十分的簡單，仔細分析下它的執行過程還是有許多知識點的：checkClosure函數的執行是瞬間的（也許用時只是0.00001毫秒），在checkClosure的函數體內建立了一個變數str，在checkClosure執行完畢之後str並沒有被釋放，這是因為setTimeout內的匿名函數存在這對str的引用。待到2秒後函數體內的匿名函數被執行完畢,str才被釋放。
用閉包來最佳化代碼：
| 12345678910111213141516 | function forTimeout(x, y){ alert(x + y); } function delay(x , y , time){ setTimeout(‘forTimeout(‘ + x + ‘,‘ + y + ‘)‘ , time); } /** * 上面的delay函數十分難以閱讀，也不容易編寫，但如果使用閉包就可以讓代碼更加清晰 * function delay(x , y , time){ * setTimeout( * function(){ * forTimeout(x , y) * } * , time); * } */ |
匿名函數最大的用途是建立閉包（這是JavaScript語言的特性之一），並且還可以構建命名空間，以減少全域變數的使用。
| 12345678 | var oEvent = {}; (function(){ var addEvent = function(){ /*代碼的實現省略了*/ }; function removeEvent(){} oEvent.addEvent = addEvent; oEvent.removeEvent = removeEvent; })(); |
在這段代碼中函數addEvent和removeEvent都是局部變數，但我們可以通過全域變數oEvent使用它，這就大大減少了全域變數的使用，增強了網頁的安全性。 我們要想使用此段代碼：oEvent.addEvent(document.getElementById(‘box‘) , ‘click‘ , function(){});
| 12345678 | var rainman = (function(x , y){ return x + y; })(2 , 3); /** * 也可以寫成下面的形式，因為第一個括弧只是協助我們閱讀，但是不推薦使用下面這種書寫格式。 * var rainman = function(x , y){ * return x + y; * }(2 , 3); |
在這裡我們建立了一個變數rainman，並通過直接調用匿名函數初始化為5，這種小技巧有時十分實用。
| 1234567891011121314 | var outer = null; (function(){ var one = 1; function inner (){ one += 1; alert(one); } outer = inner; })(); outer(); //2 outer(); //3 outer(); //4 |
這段代碼中的變數one是一個局部變數（因為它被定義在一個函數之內），因此外部是不可以訪問的。但是這裡我們建立了inner函數，inner函數是可以訪問變數one的；又將全域變數outer引用了inner，所以三次調用outer會彈出遞增的結果。
注意
1 閉包允許內層函數引用父函數中的變數，但是該變數是最終值
| 12345678910111213141516 | /** * <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); }; } |
你會發現當滑鼠移過每一個<li>元素時，總是彈出4，而不是我們期待的元素下標。這是為什麼呢？注意事項裡已經講了（最終值）。顯然這種解釋過於簡單，當mouseover事件調用監聽函數時，首先在匿名函數（ function(){ alert(i); }）內部尋找是否定義了 i，結果是沒有定義；因此它會向上尋找，尋找結果是已經定義了，並且i的值是4（迴圈後的i值）；所以，最終每次彈出的都是4。
解決方案一：
| 12345678 | var lists = document.getElementsByTagName(‘li‘); for(var i = 0 , len = lists.length ; i < len ; i++){ (function(index){ lists[ index ].onmouseover = function(){ alert(index); }; })(i); } |
解決方案二：
| 1234567 | var lists = document.getElementsByTagName(‘li‘); for(var i = 0, len = lists.length; i < len; i++){ lists[ i ].$$index = i; //通過在Dom元素上綁定$$index屬性記錄下標 lists[ i ].onmouseover = function(){ alert(this.$$index); }; } |
解決方案三：
| 123456789 | 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); } |
Javascript的匿名函數與自執行
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
