function makeWelcome(x) {
	return function(y) {
		return x + y;
	};
}
 
let sayHello = makeWelcome("Hello,");
let sayHi = makeWelcome("Hi,");
 
console.log(sayHello("Tony"));
console.log(sayHi("Tony"));

結果

Hello,Tony

Hi,Tony

實現(xiàn)公有變量

需求：實現(xiàn)一個累加器，每次調(diào)用就增加一次。

function makeCounter(){
	let count = 0;
	function innerFunction(){
		return count++;
	}
	return innerFunction;
}
let counter = makeCounter();
 
console.log(counter());
console.log(counter());
console.log(counter());

結果

0

1

2

緩存

設想有一個處理過程很耗時的函數(shù)對象，可以將計算出來的值存儲起來，當調(diào)用這個函數(shù)的時候，首先在緩存中查找。如果找不到，則進行計算，然后更新緩存并返回值；如果找到了，直接返回查找到的值即可。

閉包可以做到這一點，因為它不會釋放外部的引用，從而函數(shù)內(nèi)部的值可以得以保留。

本處為了簡單，直接寫讀寫緩存的示例。（而不是讀不到再計算，然后存到緩存）。

let cache = function () {
	// Map允許鍵為任意類型。如果這么寫：let storage = {}，則鍵只能為字符串
	let storage = new Map();
	return {
		setCache: function (k, v) {
			storage[k] = v;
		},
		getCache: function (k) {
			return storage[k];
		},
		deleteCache: function (k) {
			delete storage[k];
		}
	}
}();
 
cache.setCache('a', 1);
console.log(cache.getCache('a'))

結果

1

封裝(屬性私有化)

只能通過提供的閉包的形式來訪問內(nèi)部變量。（此法不好，建議使用原型鏈）。

let person = function(){
	//變量作用域為函數(shù)內(nèi)部，外部無法訪問  
	let name = "defaultName";
 
	return {
		getName: function(){
			return name;
		},
		setName: function(newName){
			name = newName;
		}
	}
}();
 
console.log(person.name);
console.log(person.getName());
person.setName("Hello");
console.log(person.getName());

結果

undefined

defaultName

Hello

閉包的原理

以計數(shù)器為例：

function makeCounter() {
	let count = 0;
	return function() {
		return count++;
	};
}
let counter = makeCounter();
console.log(counter());
console.log(counter());
console.log(counter());

結果

0

1

2

每次 makeCounter() 調(diào)用的開始，都會創(chuàng)建一個新的詞法環(huán)境對象，以存儲該makeCounter 運行時的變量。

因此，我們有兩層嵌套的詞法環(huán)境：

在執(zhí)行 makeCounter() 的過程中創(chuàng)建了一個僅占一行的嵌套函數(shù)： return count++ 。我們尚未運行它，僅創(chuàng)建了它。

所有的函數(shù)在“誕生”時都會記住創(chuàng)建它們的詞法環(huán)境。原理：所有函數(shù)都有名為 [[Environment]] 的隱藏屬性，該屬性保存了對創(chuàng)建該函數(shù)的詞法環(huán)境的引用：

因此， counter.[[Environment]] 有對 {count: 0} 詞法環(huán)境的引用。這就是函數(shù)記住它創(chuàng)建于何處的方式，與函數(shù)被在哪兒調(diào)用無關。 [[Environment]] 引用在函數(shù)創(chuàng)建時被設置并永久保存。

稍后，當調(diào)用 counter() 時，會為該調(diào)用創(chuàng)建一個新的詞法環(huán)境，并且其外部詞法環(huán)境引用獲取于 counter.[[Environment]] ：

現(xiàn)在，當 counter() 中的代碼查找 count 變量時，它首先搜索自己的詞法環(huán)境（為空，因為那里沒有局部變量），然后是外部 makeCounter() 的詞法環(huán)境，并且在哪里找到就在哪里修

改（在變量所在的詞法環(huán)境中更新變量）。

這是執(zhí)行后的狀態(tài)：

如果我們調(diào)用 counter() 多次， count 變量將在同一位置增加到 2， 3等。

垃圾收集

簡介

通常，函數(shù)調(diào)用完成后，會將詞法環(huán)境和其中的所有變量從內(nèi)存中刪除，因為現(xiàn)在沒有任何對它們的引用了。

與 JavaScript 中的任何其他對象一樣，詞法環(huán)境僅在可達時才會被保留在內(nèi)存中。但是，如果有一個嵌套函數(shù)在函數(shù)結束后仍可達，則它具有引用詞法環(huán)境的[[Environment]] 屬性。

如果在函數(shù)執(zhí)行完成后，詞法環(huán)境仍然可達，則此嵌套函數(shù)仍然有效。例如：

function f() {
    let value = 123;
    return function() {
        alert(value);
    }
}
// g.[[Environment]] 存儲了對相應 f() 調(diào)用的詞法環(huán)境的引用
let g = f();

如果多次調(diào)用 f() ，并且返回的函數(shù)被保存，那么所有相應的詞法環(huán)境對象也會保留在內(nèi)存中。例如：

function f() {
    let value = Math.random();
    return function () {
        alert(value);
    };
}
 
// 數(shù)組中的 3 個函數(shù)，每個都與來自對應的 f() 的詞法環(huán)境相關聯(lián)
let arr = [f(), f(), f()];

當詞法環(huán)境對象變得不可達時，它就會死去（就像其他任何對象一樣）。換句話說，它僅在至少有一個嵌套函數(shù)引用它時才存在。

在下面的代碼中，嵌套函數(shù)被刪除后，其封閉的詞法環(huán)境（以及其中的 value ）也會被從內(nèi)存中刪除：

function f() {
    let value = 123;
    return function() {
        alert(value);
    }
} 
let g = f(); // 當 g 函數(shù)存在時，該值會被保留在內(nèi)存中
g = null;    // 現(xiàn)在內(nèi)存被清理了

實際開發(fā)中的優(yōu)化

正如我們所看到的，理論上當函數(shù)可達時，它外部的所有變量也都將存在。但在實際中，JavaScript 引擎會試圖優(yōu)化它。它們會分析變量的使用情況，如果從代碼中可以明顯看出有未使用的外部變量，那么就會將其刪除。

V8（Chrome，Opera）的一個重要的副作用是，此類變量在調(diào)試中將不可用。

打開 Chrome 瀏覽器的開發(fā)者工具，并嘗試運行下面的代碼。

    function f() {
        let value = Math.random();
        function g() {
            debugger;
        }
        return g;
    } 
    let g = f();
    g();

當代碼執(zhí)行到“debugger;”這個地方時會暫停，此時在控制臺中輸入 console.log(value);。

結果：報錯：VM146:1 Uncaught ReferenceError: value is not defined

這可能會導致有趣的調(diào)試問題。比如：我們可以看到的是一個同名的外部變量，而不是預期的變量：

let value = "Surprise!";
function f() {
    let value = "the closest value";
    function g() {
        debugger;
    }
    return g;
}
let g = f();
g();

當代碼執(zhí)行到“debugger;”這個地方時會暫停，此時在控制臺中輸入 console.log(value);。

結果：輸出：Surprise。?

以上就是JavaScript閉包原理及作用詳解的詳細內(nèi)容，更多關于JavaScript閉包的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: