JavaScript基礎---範圍，匿名函數和閉包 (1)

匿名函數就是沒有名字的函數，閉包是可訪問一個函數範圍裡變數的函數。 一．匿名函數 //普通函數 function box() { //函數名是 box return 'TT'; }   //匿名函數 function () { //匿名函數，會報錯 return 'TT'; }   //通過運算式自我執行 (function box() {       //封裝成運算式 alert('TT'); })();   //()表示執行函數，並且傳參   //把匿名函數賦值給變數 var box = function () { //將匿名函數賦給變數 return 'TT'; }; alert(box()); //調用方式和函數調用相似   //函數裡的匿名函數 function box () { return function () { //函數裡的匿名函數，產生閉包 return 'TT'; } } alert(box()());   //調用匿名函數   二．閉包 閉包是指有權訪問另一個函數範圍中的變數的函數， 建立閉包的常見的方式， 就是在一個函數內部建立另一個函數，通過另一個函數訪問這個函數的局部變數。 程式碼範例： 複製代碼 1 //通過閉包可以返回局部變數 2  3 function box() { 4  5     var user = 'TT'; 6  7     return function () { 　　　　//通過匿名函數返回 box()局部變數 8  9         return user;10 11     };12 13 }14 15 alert(box()());　　　 //通過 box()()來直接調用匿名函數傳回值16 17 var b = box();18 19 alert(b());　　　　 //另一種調用匿名函數傳回值複製代碼  使用閉包有一個優點， 也是它的缺點： 就是可以把局部變數駐留在記憶體中， 可以避免使用全域變數。(全域變數汙染導致應用程式不可預測性，每個模組都可調用必將引來災難，所以推薦使用私人的，封裝的局部變數)。   //1. 通過全域變數來累加 複製代碼 1 var age = 100;         //全域變數 2  3 function box() { 4  5     age ++; 　　　　//模組層級可以調用全域變數，進行累加 6  7 } 8  9 box(); 　　　　　　//執行函數，累加10 11 alert(age); 　　//輸出全域變數複製代碼    //2. 通過局部變數無法實現累加 複製代碼 1 function box() { 2  3     var age = 100;   //局部變數 4  5     age ++; 　　　　//累加 6  7     return age; 8  9 }10 11 alert(box());　　 //10112 13 alert(box()); 　　//101，無法實現，因為又被初始化了複製代碼    //3. 通過閉包可以實現局部變數的累加 複製代碼 1 function box() { 2  3     var age = 100; 4  5     return function () { 6  7         age ++; 8  9         return age;   //返回age，實現局部變數的駐留10 11     }12 13 }14 15 var b = box();　　  //獲得函數16 17 alert(b()); 　　　　//調用匿名函數18 19 alert(b());　　　　 //第二次調用匿名函數，實現累加20 21                  複製代碼  PS：由於閉包裡範圍返回的局部變數資源不會被立刻銷毀回收，所以可能會佔用更多的記憶體。過度使用閉包會導致效能下降，建議在非常有必要的時候才使用閉包。   問題：範圍鏈的機制導致一個問題，在迴圈中裡的匿名函數取得的任何變數都是最後一個值。 代碼如下： 複製代碼 1 //迴圈裡包含匿名函數 3 function box() { 4  5     var arr = []; 6  7     for (var i = 0; i < 5; i++) { 8  9         arr[i] = function () {10 11             return i;12 13         };14 15     }16 17     return arr;18 19 }20 21 var b = box(); 　　　　//得到函數數組22 23 alert(b.length); 　　//得到函數集合長度24 25 for (var i = 0; i < b.length; i++) {26 27     alert(b[i]()); 　　　　//輸出每個函數的值，都是最後一個值 528 29 }複製代碼  分析：上面的例子輸出的結果都是 5，也就是迴圈後得到的最大的 i 值。因為 b[i]調用的是匿名函數，匿名函數並沒有自我執行，等到調用的時候，box()已執行完畢，i 早已變成 5，所以最終的結果就是 5 個 5。   //改 1: 自我執行匿名函數 複製代碼 1 function box() { 2  3     var arr = []; 4  5     for (var i = 0; i < 5; i++) { 6  7         arr[i] = (function (num) {　　　　　　 //自我執行 8  9         return num;10 11         })(i);          //並且傳參12 13     }14 15     return arr;16 17 }18 19 var b = box();20 21 for (var i = 0; i < b.length; i++) {22 23     alert(b[i]);        //這裡返回的是數組，直接列印即可24 25 }26 27          複製代碼  改 1 中，我們讓匿名函數進行自我執行，導致最終返回給 a[i]的是數組而不是函數了。最終 b[0]-b[4]中保留了 0,1,2,3,4 的值。   //改 2: 匿名函數下再做個匿名函數 （原理同前面通過閉包實現局部變數的累加類似，閉包可以使變數駐留在記憶體中） //因為每次調用外層函數時的參數不同。每次被調用的時候，它(被返回的嵌套函數)建立的範圍也有些許不同。 //也就是說，對於外層函數的每次調用，都會在範圍鏈中產生一個不同的調用對象。（範圍鏈的知識見本系列2） 複製代碼 1 function box() { 2  3     var arr = []; 4  5     for (var i = 0; i < 5; i++) { 6  7         arr[i] = (function (num) { 8  9             return function () { 　　　　//直接傳回值，改 2 變成返回函數10 11                 return num; 　　　　　　//原理和改 1 一樣12 13             }14 15         })(i);16 17     }18 19 return arr;20 21 }22 23 var b = box();24 25 for (var i = 0; i < b.length; i++) {26 27     alert(b[i]()); 　　//這裡通過 b[i]()函數調用即可28 29 }複製代碼  改 1 和改 2 中，我們通過匿名函數自我執行，立即把結果賦值給 a[i]。每一個 i，是調用方通過按值傳遞的，所以最終返回的都是指定的遞增的 i。而不是box()函數裡的 i。   關於 this 對象 在閉包中使用 this 對象也可能會導致一些問題，this 對象是在運行時基於函數的執行環境綁定的，如果 this 在全域範圍就是 window，如果在對象內部就指向這個對象。而閉包卻在運行時指向 window 的，因為閉包並不屬於這個對象的屬性或方法。 程式碼範例： 複製代碼 1 var user = 'The Window'; 2  3 var obj = { 4  5     user : 'The Object', 6  7     getUserFunction : function () { 8  9         return function () { 　　//閉包不屬於 obj， 裡面的 this 指向 window10 11             return this.user;12 13         };14 15     }16 17 };18 19 alert(obj.getUserFunction()()); 　　//The window複製代碼    //1. 可以強制指向某個對象 alert(obj.getUserFunction().call(obj));      //The Object //2. 也可以從上一個範圍中得到對象 getUserFunction : function () { var that = this;      //從對象的方法裡得對象 return function () { return that.user; }; }   記憶體流失 由於 IE 的 JScript 對象和 DOM 對象使用不同的垃圾收集方式， 因此閉包在 IE 中會導致一些問題。 就是記憶體流失的問題， 也就是無法銷毀駐留在記憶體中的元素。 程式碼範例： 複製代碼 1 function box() { 2  3     var oDiv = document.getElementById('oDiv'); 　　//oDiv 用完之後一直駐留在記憶體 4  5     oDiv.onclick = function () { 6  7         alert(oDiv.innerHTML); 　　//這裡用 oDiv 導致記憶體流失 8  9     };10 11 }12 13 box();14 15 16 //那麼在最後應該將 oDiv 解除引用來避免記憶體流失。17 18 //修正：19 20 function box() {21 22     var oDiv = document.getElementById('oDiv');23 24     var text = oDiv.innerHTML;25 26     oDiv.onclick = function () {27 28         alert(text);29 30     };31 32     oDiv = null;　　 //解除引用33 34 }複製代碼  PS：如果並沒有使用解除引用，那麼需要等到瀏覽器關閉才得以釋放。   模仿塊級範圍 JavaScript 沒有塊級範圍的概念。 程式碼範例1： function box(count) { for (var i=0; i<count; i++) {} alert(i);   // i 不會因為離開了 for 塊就失效 } box(2);   程式碼範例2： function box(count) { for (var i=0; i<count; i++) {} var i; //就算重新聲明，也不會覆蓋前面的值（但是如果初始化，會執行這個值） alert(i); } box(2);   以上兩個例子，說明 JavaScript 沒有塊級語句的範圍，if () {} for () {}等沒有範圍，如果有，出了這個範圍 i 就應該被銷毀了。就算重新聲明同一個變數也不會改變它的值。JavaScript 不會提醒你是否多次聲明了同一個變數；遇到這種情況，它只會對後續的聲明視而不見(如果初始化了，當然還會執行的)。使用模仿塊級範圍可避免這個問題。 //模仿塊級範圍(私人範圍) //使用塊級範圍(私人範圍)改寫 複製代碼 1 function box(count) { 2  3     (function () { 4  5         for (var i = 0; i<count; i++) {} 6  7     })(); 8  9     alert(i);   //報錯，無法訪問10 11 }12 13 box(2);複製代碼  使用了塊級範圍(私人範圍)後，匿名函數中定義的任何變數，都會在執行結束時被銷毀。 這種技術經常在全域範圍中被用在函數外部， 從而限制向全域範圍中添加過多的變數和函數。 一般來說， 我們都應該儘可能少向全域範圍中添加變數和函數。 在大型項目中，多人開發的時候，過多的全域變數和函數很容易導致命名衝突，引起災難性的後果。 如果採用塊級範圍(私人範圍)，每個開發人員既可以使用自己的變數，又不必擔心搞亂全域範圍。 (function () { var box = [1,2,3,4]; alert(box);       //box 出來就不認識了 })(); 在全域範圍中使用塊級範圍可以減少閉包佔用的記憶體問題， 因為沒有指向匿名函數的引用。只要函數執行完畢，就可以立即銷毀其範圍鏈了。   私人變數 JavaScript 沒有私人屬性的概念；所有的對象屬性都是公有的。不過，卻有一個私人變數的概念。 任何在函數中定義的變數， 都可以認為是私人變數， 因為不能在函數的外部存取這些變數。 function box() { var age = 100; //私人變數，外部無法訪問 }   而通過函數內部建立一個閉包，那麼閉包通過自己的範圍鏈也可以訪問這些變數。 而利用這一點，可以建立用於訪問私人變數的公有方法。代碼如下： 複製代碼 1 function Box() { 2  3     var age = 100; 　　　　　　　　　　//私人變數 4  5     function run() {　　　　 　　　　　//私人函數 6  7         return '運行中...'; 8  9     }10 11     this.get = function () { 　　//對外公用的特權方法12 13         return age + run();14 15     };16 17 }18 19 var box = new Box();20 21 alert(box.get());    複製代碼可以通過構造方法傳參來訪問私人變數。代碼如下： 複製代碼 1 function Person(value) { 2  3     var user = value; 　　　　//這句可以省略 4  5     this.getUser = function () { 6  7         return user; 8  9     };10 11     this.setUser = function (value) {12 13         user = value;14 15     };16 17 }複製代碼  但是對象的方法， 在多次調用的時候， 會多次建立。 可以使用靜態私人變數來避免這個問題。   靜態私人變數（類似按引用傳遞） 通過塊級範圍(私人範圍)中定義私人變數或函數， 同樣可以建立對外公用的特權方法。 程式碼範例： 複製代碼 1 (function () { 2  3          var user = ''                                  //私人變數 4  5          //function Box() {}              6  7          Box = function (value) {　　　　　　　　　　　　//全域，建構函式 8  9                    user = value;10 11          };12 13          Box.prototype.getUser = function () {14 15                    return user;16 17          };18 19          Box.prototype.setUser = function (value) {20 21                    user = value;22 23          }24 25 })();26 27  28 29 var box = new Box('TT');                   //第一次執行個體化30 31 alert(box.getUser());                          //TT32 33 var box2 = new Box('CC');                 //第二次執行個體化34 35 alert(box.getUser());                          //CC36 37 box2.setUser('OO');38 39 alert(box.getUser());  //OO，用box2設定，用box調用說明實現共用