第一百一十節，JavaScript匿名函數和閉包

JavaScript匿名函數和閉包

學習要點：

1.匿名函數

2.閉包

匿名函數就是沒有名字的函數，閉包是可訪問一個函數做用域裏變量的函數。聲明：本節內容須要有面向對象和少許設計模式基礎，不然沒法聽懂.(所需基礎15章的時候已經聲明過了)。

 

一．匿名函數

普通函數

function box() {                            //函數名是box
    return 'Lee';
}

alert(box());//經過函數名稱來執行函數

 

匿名函數

就是沒有名稱的函數

//匿名函數
function () {                                //匿名函數，會報錯
    return 'Lee';
}
//匿名函數,由於沒有名稱因此沒法執行，也就會報錯

 

經過表達式自我執行匿名函數

//經過表達式自我執行
(function box() {                            //用括號將函數體，封裝成表達式，就是用一對括號將函數體括起來，
    alert('Lee');
})();                                        //最後用一個()表示執行函數，
//返回：Lee

 

用過變量執行匿名函數

//把匿名函數賦值給變量
var box = function () {                        //將匿名函數賦給變量
    return 'Lee';
};
alert(box());                                //調用方式和函數調用類似，也就是經過變量名稱加()執行函數

 

函數裏的匿名函數，產生閉包

 

//函數裏的匿名函數
function box () {
    return function () {                        //函數裏的匿名函數，產生閉包
        return 'Lee';
    }
}
//執行方式1
alert(box()());                                //經過執行函數，在加上一對括號執行匿名函數

//執行方式2
var asdf = box();   //將執行函數賦值給一個變量，
alert(asdf());    //在經過變量在執行裏面匿名函數

 

 

二． 閉包，是在函數裏返回匿名函數【重點】

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

 

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

 

//經過閉包能夠返回局部變量
function box() {           //建立box函數
    var user = 'Lee';       //函數裏有一個局部變量
    return function () {    //經過匿名函數返回box()局部變量
        return user;     //返回box()局部變量
    };
}
alert(box()());                                //經過box()()來直接調用匿名函數返回值

var b = box();
alert(b());                                    //另外一種方式調用匿名函數返回值
//返回Lee

 

 

閉包優勢和缺點

閉包能夠把局部變量駐留在內存中

使用閉包有一個優勢，也是它的缺點：就是能夠把局部變量駐留在內存中，能夠避免使用全局變量。(全局變量污染致使應用程序不可預測性，每一個模塊均可調用必將引來災難，因此推薦使用私有的，封裝的局部變量)。 

//經過全局變量來累加
var age = 100;                                //全局變量
function box1() {
    age ++;                                //模塊級能夠調用全局變量，進行累加
}
box1();                                    //執行函數，累加了
alert(age);                                //輸出全局變量
//101
box1();                                    //執行函數，累加了
alert(age);                                //輸出全局變量
//102
box1();                                    //執行函數，累加了
alert(age);                                //輸出全局變量
//103

//經過局部變量沒法實現累加
function box2() {
    var age = 100;                      //局部變量
    age ++;                                //累加
    return age;
}

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

//經過閉包能夠實現局部變量的累加，閉包能夠把局部變量駐留在內存中
function box() {        //建立函數
    var age = 100;      //局部變量
    return function () {    //建立閉包匿名函數
        age ++;         //局部變量++
        return age;    //返回累加後的局部變量
    }
}
var b = box();                                //得到函數
alert(b());                                    //調用匿名函數
alert(b());                                    //第二次調用匿名函數，實現累加

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

 

循環裏包含匿名函數，出現問題

做用域鏈的機制致使一個問題，在循環中裏的匿名函數取得的任何變量都是最後一個值。

//循環裏包含匿名函數
function box() {      //建立函數
    var arr = [];    //建立一個空數組

    for (var i = 0; i < 5; i++) {    //循環5次
        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
}

上面的例子輸出的結果都是5，也就是循環後獲得的最大的i值。由於b[i]調用的是匿名函數，匿名函數並無自我執行，等到調用的時候，box()已執行完畢，i早已變成5，因此最終的結果就是5個5。

 

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

//循環裏包含匿名函數-改1，自我執行匿名函數
function box() {   //建立函數
    var arr = [];  //函數裏建立一個空數組

    for (var i = 0; i < 5; i++) {    //循環5次
        arr[i] = (function (num) {        //每次循環自我執行匿名函數，獲得匿名函數的返回值，將返回值經過數組下標添加到數組
            return num;
        })(i);                            //每次執行匿名函數，而且將每次循環的i傳入匿名函數
    }
    return arr;  //最後返回數組
}

var b = box();      //執行函數獲得，數組
for (var i = 0; i < b.length; i++) {   //根據數組的長度來循環次數
    alert(b[i]);                            //每次循環經過數組下標，來打印數組裏的元素
}
//返回
//0
//1
//2
//3
//4

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

 

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

//循環裏包含匿名函數-改2，匿名函數下再作個匿名函數
function box() {     //建立函數
    var arr = [];    //函數裏建立數組

    for (var i = 0; i < 5; i++) {   //循環5次
        arr[i] = (function (num) {    //自我執行匿名函數，將每次循環的i傳到匿名函數1，
            return function () {      //匿名函數2直接返回值i的值，函數裏的函數閉包，閉包能夠將i駐留在內存
                return num;                //原理和改1同樣
            }
        })(i);                      //執行匿名函數，並將i傳入匿名函數
    }
    return arr;  //返回數組
}

var b = box();  //執行函數，獲得數組
for (var i = 0; i < b.length; i++) {  //根據數組的長度來循環次數
    alert(b[i]());                    //經過數組的下標來獲取數組的元素
}
//返回
//0
//1
//2
//3
//4

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

 

關於this對象，也就是this做用域在對象閉包裏的狀況

在閉包中使用this對象也可能會致使一些問題，this對象是在運行時基於函數的執行環境綁定的，若是this在全局範圍就是window，若是在對象內部就指向這個對象。而閉包卻在運行時指向window做用域的，由於閉包並不屬於這個對象的屬性或方法。

this做用域在對象閉包裏，做用域指向的window全局

var user = 'The Window';  //全局變量建立字符串

var obj = {    //建立對象
    user : 'The Object',  //添加一個對象屬性
    getUserFunction : function () {  //添加一個對象方法
        return function () {                    //返回閉包，閉包不屬於obj，裏面的this指向window
            return this.user;   //這裏的this指向window做用域，那麼就是全局變量user
        };
    }
};

alert(obj.getUserFunction()());        //打印對象裏的getUserFunction方法，返回的是全局變量user
//返回：The Window

//能夠強制指向某個對象，用對象冒充，將本身傳入冒充方法裏，冒充本身，這樣this就指向了對象自己
alert(obj.getUserFunction().call(obj));            //The Object
//返回：The Object

 

將做用域在對象閉包裏，強制指向對象

var user = 'The Window';  //全局變量建立字符串

var obj = {    //建立對象
    user : 'The Object',  //添加一個對象屬性
    getUserFunction : function () {  //添加一個對象方法
        var zyy = this;    //建立一個變量等於做用域，這裏的做用域在閉包外，就是指向的對象自己
        return function () {                    //返回閉包，閉包不屬於obj
            return zyy.user;   //這裏使用zyy變量做用域，這樣就強制將做用域指向對象
        };
    }
};

alert(obj.getUserFunction()());        //打印對象裏的getUserFunction方法，返回的是對象裏的user屬性
//返回：The Object

 

內存泄漏，也就是沒法銷燬駐留在內存中的元素

也就是在使用完後用null; 解除引用，進行回收

因爲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 box1(count) {     //建立一個函數
    for (var i=0; i<count; i++) {} //根據傳參進行循環次數
    alert(i);                    //打印i,i不會由於離開了for塊就失效,
}
box1(2);
//返回;2

function box2(count) {  //建立一個函數
    for (var i=0; i<count; i++) {}  //根據傳參進行循環次數
    var i;                                //就算從新聲明一個i變量
    alert(i);                          //就算從新聲明一個i變量，也能打印i
}
box2(2);
//返回：2

以上兩個例子，說明JavaScript沒有塊級語句的做用域，if () {} for () {}等沒有做用域，若是有，出了這個範圍i就應該被銷燬了。就算從新聲明同一個變量也不會改變它的值。

JavaScript不會提醒你是否屢次聲明瞭同一個變量；遇到這種狀況，它只會對後續的聲明視而不見(若是初始化了，固然還會執行的)。使用模仿塊級做用域可避免這個問題。

 

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

就是將要私有的變量或者函數寫在匿名函數裏，這樣就私有了

列1

(function () {
    //這裏是塊級做用域
})();

列2

//使用塊級做用域(私有做用域)改寫
function box(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;                            //私有變量，外部沒法訪問
}

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

function Box() {
    var age = 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;   //返回user對象
    };
    this.setUser = function (value) {  //添加對象方法接收一個參數
        user = value;  //返回傳參
    };
}
var person = new Person('變量'); //實列化對象
alert(person.getUser()); //打印對象裏的getUser()方法
//返回：變量

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

 

靜態私有變量

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

(function () {   //建立一個自我執行匿名函數
    var age = 100;   //私有變量
    function run() {   //私有函數
        return '運行中...';
    }
    Box = function () {};                    //構造方法
    Box.prototype.go = function () {            //原型方法
        return age + run();  //返回私有變量加私有函數
    };
})();


var box = new Box(); //實列化對象
alert(box.go()); //打印對象裏的go方法

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

 

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

(function () {  //建立自我執行匿名函數
    var user = '';   //建立私有變量等於空字符串
    Person = function (value) {      //建立全局構造對象函數
        user = value;   //將對象傳參從新賦值給私有變量
    };
    Person.prototype.getUser = function () { //建立原型方法
        return user; //返回私有變量
    };
    Person.prototype.setUser2 = function (value) {  //建立原型方法接收一個參數
        user = value;  //將傳參賦值給私有變量
        return user;
    }
})();

var abdc = new Person('變量');//實列化對象
alert(abdc.getUser()); //打印對象裏的方法
alert(abdc.setUser2('變量2'));

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

 

模塊模式

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

列1

var box = {                                //字面量對象，也是單例對象
    age : 100,                             //這是公有屬性，將要改爲私有
    run : function () {                    //這是公有函數，將要改爲私有
        return '運行中...';
    }
};

列2

//私有化變量和函數：
var box = function () {  //建立一個自我執行函數
    var age = 100;  //私有變量
    function run() {  //私有函數
        return '運行中...';
    }
    return {                                //直接返回對象
        go : function () {     //建立一個對象方法
            return age + run();  //返回私有變量加私有函數
        }
    };
}();

alert(box.go());  //打印box函數裏的go方法

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

var box = function () {  //自我執行函數
    var age = 100;   //私有變量
    function run() {  //私有函數
        return '運行中...';
    }
    var obj =  {                            //建立字面量對象
        go : function () {   //建立對象方法
            return age + run();  //返回私有變量加私有方法
        }
    };
    return obj;                            //最後返回這個對象
}();

alert(box.go());

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

 

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

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()); //打印對象裏go()方法