深究JavaScript——閉包

Dionysus_go 發(fā)布于2019-08-21 11:32 / 1266人閱讀

摘要：函數(shù)是中唯一擁有自身作用域的結(jié)構(gòu)，因此閉包的創(chuàng)建依賴于函數(shù)。閉包中的匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其對(duì)象通常指向在通過(guò)或改變函數(shù)執(zhí)行環(huán)境的情況下，就會(huì)指向其他對(duì)象。當(dāng)匿名函數(shù)執(zhí)行完畢，其作用域鏈立即銷毀，從而可以減少閉包占用資源問(wèn)題。

概念

??閉包是指能夠引用外部函數(shù)中的局部變量的函數(shù)，并導(dǎo)致外部函數(shù)調(diào)用后函數(shù)對(duì)象與局部變量無(wú)法及時(shí)銷毀。函數(shù)是JavaScript中唯一擁有自身作用域的結(jié)構(gòu)，因此閉包的創(chuàng)建依賴于函數(shù)。

 var Foo = function() {
     var name = "staven";
     this.getName = function() {
         return name;
     };
 };
 var foo = new Foo();
 console.log(foo.name);             //undefined
 console.log(foo.getName());     //staven

閉包中的循環(huán)

?? 作用域鏈的這種配置機(jī)制引出了一個(gè)值得注意的副作用，即閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值。

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  //10次輸出10
    }, 1000);
}

??為了正確的獲得循環(huán)序號(hào)，最好使用自執(zhí)行匿名函數(shù)。

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

閉包中的this

??匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其 this 對(duì)象通常指向 window（在通過(guò) call()或 apply()改變函數(shù)執(zhí)行環(huán)境的情況下， this 就會(huì)指向其他對(duì)象）。

var name = "全局";
var obj = {
    name: "局部",
    getName: function(){
        var that = this;
        return function(){
            return that.name;
        }
    }
};
console.log(obj.getName()());   //局部

??把外部作用域中的 this 對(duì)象保存在一個(gè)閉包能夠訪問(wèn)到的變量里，就可以讓閉包訪問(wèn)該對(duì)象了。

var name = "全局";
var obj = {
    name: "局部",
    getName: function() {
        var that = this;
        return function() {
            return that.name;
        };
    }
};
console.log(obj.getName()());  //"局部"

閉包的作用

模擬塊級(jí)作用域:

??只要我們臨時(shí)需要一些變量，都可以使用塊級(jí)作用域（私有作用域）。當(dāng)匿名函數(shù)執(zhí)行完畢，其作用域鏈立即銷毀，從而可以減少閉包占用資源問(wèn)題。

(function($, window, document, undefined){
    var name = "staven";
    $.fn.getName = function(){
        
    };
})(jQuery, window, document);

在內(nèi)存中保存變量:

??緩存數(shù)據(jù)、柯里化

模擬私有屬性和私有方法:

//利用閉包實(shí)現(xiàn)
var Book = (function(){
    //靜態(tài)私有變量
    var bookNum = 0;
    //靜態(tài)私有方法
    function checkBook(name){
        console.log("checking Book……");
    }
    //創(chuàng)建類
    function _book(newId, newName, newPrice){
        if(this instanceof _book){
            //私有變量
            var name, price;
            //私有方法
            function checkID(id){
                console.log("checking id……");
            }
            //特權(quán)方法
            this.getName = function(){};
            this.getPrice = function(){};
            this.setName = function(){};
            this.setPrice = function(){};
            //公有屬性
            this.id = newId;
            //公有方法
            this.copy = function() {
                console.log("copying……")
            };
            bookNum++;
            if(bookNum > 100){
                throw new Error("我們僅出版100本書");
            }
            //構(gòu)造器
            this.setName(name);
            this.setPrice(price);
        }else{
            return new _book(newId, newName, newPrice);
        }
        
    }
    //構(gòu)建原型
    _book.prototype = {
        //靜態(tài)共有屬性
        isJSBook:false,
        //靜態(tài)共有方法
        show:function(){
            console.log("showing……");
        }
    };
    //返回類
    return _book;
})();
Book(21,"staven",23).show();        //showing……
Book(21,"staven",23).copy();        //copy……
var book = new Book(21,"staven",23);
book.show();    //showing……
book.copy();    //copying……

??由于閉包會(huì)攜帶包含它的函數(shù)的作用域，因此會(huì)比其他函數(shù)占用更多的內(nèi)存。過(guò)度使用閉包可能會(huì)導(dǎo)致內(nèi)存占用過(guò)多，建議只在絕對(duì)必要時(shí)再考慮使用閉包。