javascript學習筆記之匿名函數和閉包

匿名函數就是沒有名字的函數，閉包是可訪問一個函數做用域裏變量的函數。

一、匿名函數

    //普通函數

    functionbox(){ //函數名是box

        return 'Lee';

    }

    //匿名函數

    function(){ //匿名函數，會報錯

        return 'Lee';

    }

    //經過表達式自我執行

    (functionbox(){ //封裝成表達式

        alert('Lee');

    })(); //()表示執行函數，而且傳參

    //把匿名函數賦值給變量

    varbox=function(){ //將匿名函數賦給變量

        return 'Lee';

    };

    alert(box()); //調用方式和函數調用類似

    //函數裏的匿名函數

    functionbox(){

        return function(){ //函數裏的匿名函數，產生閉包

         return 'Lee';

        }

    }

    alert(box()()); //調用匿名函數

二、閉包

閉包是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的常見的方式，就是在一個函數內部建立另外一個函數，經過另外一個函數訪問這個函數的局部變量。

    //經過閉包能夠返回局部變量

    functionbox(){

        var user = 'Lee';

        return function(){ //經過匿名函數返回box()局部變量

            return user;

        };

    }

    alert(box()()); //經過box()()來直接調用匿名函數返回值

    varb=box();

    alert(b()); //另外一種調用匿名函數返回值

使用閉包有一個優勢，也是它的缺點：就是能夠把局部變量駐留在內存中，能夠避免使用全局變量。

(全局變量污染致使應用程序不可預測性，每一個模塊均可調用必將引來災難，因此推薦使用私有的，封裝的局部變量)。

    //經過全局變量來累加

    varage=100; //全局變量

    functionbox(){

        age++; //模塊級能夠調用全局變量，進行累加

    }

    box(); //執行函數，累加了

    alert(age); //輸出全局變量

    //經過局部變量沒法實現累加

    functionbox(){

        varage = 100;

        age++; //累加

        return age;

    }

    alert(box()); //101

    alert(box()); //101，沒法實現，由於又被初始化了

    //經過閉包能夠實現局部變量的累加

    functionbox(){

        var age = 100;

        return function(){

            age++;

            return age;

        }

    }

    var b = box(); //得到函數

    alert(b()); //調用匿名函數

    alert(b()); //第二次調用匿名函數，實現累加

PS：因爲閉包裏做用域返回的局部變量資源不會被馬上銷燬回收，因此可能會佔用更多的內存。過分使用閉包會致使性能降低，

建議在很是有必要的時候才使用閉包。做用域鏈的機制致使一個問題，在循環中裏的匿名函數取得的任何變量都是最後一個值。

    //循環裏包含匿名函數

    functionbox(){

        var arr = [];

        for(var i = 0; i < 5; i++){

            arr[i] = function(){

                return i;

            };

        }

        return arr;

    }

    var b = box(); //獲得函數數組

    alert(b.length); //獲得函數集合長度

    for(var i = 0;i < b.length; i++){

        alert(b[i]()); //輸出每一個函數的值，都是最後一個值

    }

上面的例子輸出的結果都是5，也就是循環後獲得的最大的i值。由於b[i]調用的是匿名函數，匿名函數並無自我執行，

等到調用的時候，box()已執行完畢，i早已變成5，因此最終的結果就是5個5。

    //循環裏包含匿名函數-改1，自我執行匿名函數

    function box(){

        vararr = [];

        for(var i = 0;i < 5; i++){

            arr[i] = (function(num){ //自我執行

                return num;

            })(i); //而且傳參

        }

        return arr;

    }

    var b = box();

    for(var i = 0;i < b.length; i++){

    alert(b[i]); //這裏返回的是數組，直接打印便可

    }

改1中，咱們讓匿名函數進行自我執行，致使最終返回給a[i]的是數組而不是函數了。最終致使b[0]-b[4]中保留了0,1,2,3,4的值。

    //循環裏包含匿名函數-改2，匿名函數下再作個匿名函數

    function box(){

        var arr = [];

        for(var i = 0;i < 5; i++){

            arr[i] = (function(num){

                return function(){ //直接返回值，改2變成返回函數

                    return num; //原理和改1同樣

                }

            })(i);

        }

        return arr;

     }

    var b = box();

    for(var i = 0;i < b.length; i++){

        alert(b[i]()); //這裏經過b[i]()函數調用便可

    }

改1和改2中，咱們經過匿名函數自我執行，當即把結果賦值給a[i]。每個i，是調用方經過按值傳遞的，因此最終返回的都是指定的遞增的i。

而不是box()函數裏的i。關於this對象在閉包中使用this對象也可能會致使一些問題，this對象是在運行時基於函數的執行環境綁定的，

若是this在全局範圍就是window，若是在對象內部就指向這個對象。而閉包卻在運行時指向window的，由於閉包並不屬於這個對象的屬性或方法。

    var user = 'The Window';

    var obj = {

        user:'The Object',

        getUserFunction:function(){

            return function(){ //閉包不屬於obj，裏面的this指向window

                return this.user;

            };

        }

    };

    alert(obj.getUserFunction()()); //Thewindow

    //能夠強制指向某個對象

    alert(obj.getUserFunction().call(obj)); //TheObject

    //也能夠從上一個做用域中獲得對象

    getUserFunction:function(){

        var that = this; //從對象的方法裏得對象

        return function(){

            return that.user;

        };

    }

三、內存泄漏

因爲IE的JScript對象和DOM對象使用不一樣的垃圾收集方式，所以閉包在IE中會致使一些問題。就是內存泄漏的問題，

也就是沒法銷燬駐留在內存中的元素。如下代碼有兩個知識點尚未學習到，一個是DOM，一個是事件。

    function box(){

        var oDiv = document.getElementById('oDiv'); //oDiv用完以後一直駐留在內存

        oDiv.onclick = function(){

            alert(oDiv.innerHTML); //這裏用oDiv致使內存泄漏

        };

    }

    box();

    那麼在最後應該將oDiv解除引用來避免內存泄漏。

    function box(){

        var oDiv = document.getElementById('oDiv');

        var text = oDiv.innerHTML;

        oDiv.onclick = function(){

            alert(text);

        };

        oDiv = null; //解除引用

    }

PS：若是並無使用解除引用，那麼須要等到瀏覽器關閉才得以釋放。

四、模仿塊級做用域

JavaScript沒有塊級做用域的概念。

    function box(count){

        for(var i = 0;i < count; i++){}

        alert(i); //i不會由於離開了for塊就失效

    }

    box(2);

    function box(count){

        for(var i = 0; i < count; i++){}

        var i; //就算從新聲明，也不會前面的值

        alert(i);

    }

    box(2);

以上兩個例子，說明JavaScript沒有塊級語句的做用域，if(){}for(){}等沒有做用域，若是有，出了這個範圍i就應該被銷燬了。

就算從新聲明同一個變量也不會改變它的值。JavaScript不會提醒你是否屢次聲明瞭同一個變量；遇到這種狀況，它只會對後續的聲

明視而不見(若是初始化了，固然還會執行的)。使用模仿塊級做用域可避免這個問題。

    //模仿塊級做用域(私有做用域)

    (function(){

    //這裏是塊級做用域

    })();

    //使用塊級做用域(私有做用域)改寫

    functionbox(count){

        (function(){

            for(var i = 0; i < count; i++){}

        })();

        alert(i); //報錯，沒法訪問

    }

    box(2);

使用了塊級做用域(私有做用域)後，匿名函數中定義的任何變量，都會在執行結束時被銷燬。這種技術常常在全局做用域中被用在函數外部，

從而限制向全局做用域中添加過多的變量和函數。通常來講，咱們都應該儘量少向全局做用域中添加變量和函數。在大型項目中，

多人開發的時候，過多的全局變量和函數很容易致使命名衝突，引發災難性的後果。若是採用塊級做用域(私有做用域)，

每一個開發者既可使用本身的變量，又沒必要擔憂搞亂全局做用域。

    (function(){

    var box = [1,2,3,4];

    alert(box); //box出來就不認識了

    })();

在全局做用域中使用塊級做用域能夠減小閉包占用的內存問題，由於沒有指向匿名函數的引用。只要函數執行完畢，就能夠當即銷燬其做用域鏈了。

五、私有變量

JavaScript沒有私有屬性的概念；全部的對象屬性都是公有的。不過，卻有一個私有變量的概念。任何在函數中定義的變量，

均可以認爲是私有變量，由於不能在函數的外部訪問這些變量。

    function box(){

    var age = 100; //私有變量，外部沒法訪問

    }

而經過函數內部建立一個閉包，那麼閉包經過本身的做用域鏈也能夠訪問這些變量。而利用這一點，能夠建立用於訪問私有變量的公有方法。

    functionBox(){

        varage = 100; //私有變量

        function run(){ //私有函數

            return '運行中...';

        }

        this.get=function(){ //對外公共的特權方法

            return age + run();

        };

    }

    var box = new Box();

    alert(box.get());

    能夠經過構造方法傳參來訪問私有變量。

    function Person(value){

        var user = value; //這句其實能夠省略

        this.getUser = function(){

            return user;

        };

        this.setUser = function(value){

            user = value;

        };

    }

可是對象的方法，在屢次調用的時候，會屢次建立。可使用靜態私有變量來避免這個問題。

六、靜態私有變量

經過塊級做用域(私有做用域)中定義私有變量或函數，一樣能夠建立對外公共的特權方法。

    (function(){

        varage = 100;

        function run(){

            return '運行中...';

        }

        Box = function(){}; //構造方法

        Box.prototype.go = function(){ //原型方法

            return age + run();

        };

    })();

    var box = new Box();

    alert(box.go());

上面的對象聲明，採用的是Box=function(){}而不是functionBox(){}由於若是用後面這種，就變成私有函數了，沒法在全局訪問到了，因此使用了前面這種。

    (function(){

        var user = '';

        Person = function(value){

            user = value;

        };

        Person.prototype.getUser = function(){

            return user;

        };

        Person.prototype.setUser = function(value){

            user = value;

        }

    })();

使用了prototype致使方法共享了，而user也就變成靜態屬性了。(所謂靜態屬性，即共享於不一樣對象中的屬性)。

七、模塊模式

以前採用的都是構造函數的方式來建立私有變量和特權方法。那麼對象字面量方式就採用模塊模式來建立。

    var box = { //字面量對象，也是單例對象

        age:100, //這是公有屬性，將要改爲私有

        run:function(){ //這時公有函數，將要改爲私有

            return '運行中...';

        };

    };

    私有化變量和函數：

    var box = function(){

        var age = 100;

        function run(){

            return '運行中...';

        }

        return{ //直接返回對象

            go:function(){

            return age + run();

            }

        };

    }();

上面的直接返回對象的例子，也能夠這麼寫：

    var box = function(){

        var age = 100;

        function run(){

            return '運行中...';

        }

        var obj = { //建立字面量對象

            go:function(){

            return age + run();

            }

        };

        return obj; //返回這個對象

    }();

字面量的對象聲明，其實在設計模式中能夠看做是一種單例模式，所謂單例模式，就是永遠保持對象的一個實例。

加強的模塊模式，這種模式適合返回自定義對象，也就是構造函數。

    function Desk(){};

    var box = function(){

        var age = 100;

        function run(){

            return '運行中...';

        }

        var desk = new Desk(); //能夠實例化特定的對象

        desk.go = function(){

            return age + run();

        };

        return desk;

    }();

    alert(box.go());