JS基礎(chǔ)-閉包

Scliang 發(fā)布于2019-08-22 16:57 / 3270人閱讀

摘要：如果不用的話，你實(shí)際上聲明了一個(gè)全局變量閉包有權(quán)訪問另一個(gè)函數(shù)作用域的變量，常見的創(chuàng)建方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，通過另一個(gè)函數(shù)訪問這個(gè)函數(shù)的局部變量。

變量作用域

變量的作用域無非就是兩種：全局變量和局部變量。

函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令。如果不用的話，你實(shí)際上聲明了一個(gè)全局變量！

閉包

有權(quán)訪問另一個(gè)函數(shù)作用域的變量，常見的創(chuàng)建方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，通過另一個(gè)函數(shù)訪問這個(gè)函數(shù)的局部變量。

簡單的說就是，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個(gè)函數(shù)內(nèi)部的函數(shù)"。

MDN中定義的是：

閉包是指能夠訪問自由變量的函數(shù)。換句話說，在閉包中定義的函數(shù)可以“記憶”它被創(chuàng)建的環(huán)境。注：自由變量是既不是在本地聲明又不作為參數(shù)傳遞的一類變量。

簡單的例子

function A(){
    function B(){
        console.log("Hello Closure!");
    }
    return B;
}

var b = A();
b();//Hello Closure!

所以通過這個(gè)例子可以簡單理解閉包。

* 定義一個(gè)函數(shù)A()
* A中定義了函數(shù)B()
* A中返回B
* 執(zhí)行A()，把A的返回結(jié)果賦值給變量b
* 執(zhí)行b()

總結(jié)一句話：函數(shù)A的內(nèi)部函數(shù)B被函數(shù)A外的一個(gè)變量b引用。所以當(dāng)一個(gè)內(nèi)部函數(shù)被其外部函數(shù)之外的變量引用時(shí)，就形成了一個(gè)閉包

閉包的作用

在一個(gè)模塊中定義一個(gè)變量，希望這個(gè)變量保存在內(nèi)存中又不會(huì)污染全局變量，就用閉包來定義這個(gè)模板。

它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

閉包的注意點(diǎn)

閉包優(yōu)點(diǎn)，也是缺點(diǎn)，局部變量駐留在內(nèi)存中，可以回避使用全局變量，但由于閉包里的資源不會(huì)被立刻銷毀回收，所以可能占用更多的內(nèi)存，過度使用閉包會(huì)導(dǎo)致性能下降。

閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對象（object）使用，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value），這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

注意：可以使用之后，給它加null，接觸引用。

舉例

例子1：

var name = "The Window"; // 全局
var object = {　　　　
    name: "My Object", // 局部
    getNameFunc: function () { // 對象中的方法，this指向obj這個(gè)對象　　　　　　
        return function () {　// 閉包　　　　　　　
            return this.name; // this指向window　　　　
        }; 　　　　
    }　
};
    　
alert(object.getNameFunc()()); // The Window

例子2：

var name = "The Window"; // 全局
var object = {　　　　
    name: "My Object", // 局部
    getNameFunc: function () { // 對象中的方法，this指向obj這個(gè)對象　
        var that = this;　// 將getNameFunc()的this保存在that變量中　　　　　　
        return function () {　// 閉包　　　
            return that.name; // that指向object　　　　
        }; 　　　　
    }　
};
    　
alert(object.getNameFunc()()); // My Object

例子3：

var name = "The Window"; // 全局
var object = {　　　　
    name: "My Object", // 局部
    getNameFunc: function () { 　　
        return function () {　// 閉包　　　
            var that = this;　　
            return that.name; 　　　　
        }; 　　　　
    }　
};
    　
alert(object.getNameFunc()()); // The Window

例子4：

var name = "The Window"; // 全局
var object = {　　　　
    name: "My Object", // 局部
    getNameFunc: function () { // 對象中的方法，this指向obj這個(gè)對象　　　　　　
        return function () {　// 閉包　　　
            var that = this;　// 將getNameFunc()的this保存在that變量中　
            return that.name; // this指向window　　　　
        }; 　　　　
    }　
};
    　
alert(object.getNameFunc().call(object)); // My Object call改變this指向