JavaScript閉包原理及作用的示例分析

小編給大家分享一下JavaScript閉包原理及作用的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

簡介

說明

本文介紹JavaScript的閉包的作用、用途及其原理。

閉包的定義

閉包是指內部函數總是可以訪問其所在的外部函數中聲明的變量和參數，即使在其外部函

數被返回（壽命終結）了之后。

閉包的作用（特點）

1.函數嵌套函數

2.內部函數可以引用外部函數的參數或者變量

3.外部函數的參數和變量不會被垃圾回收，因為被內部函數引用。

閉包與全局變量

閉包的用途

柯里化

可以通過參數來生成不同的函數。

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

實現公有變量

需求：實現一個累加器，每次調用就增加一次。

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

緩存

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

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

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

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

封裝(屬性私有化)

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

let person = function(){
	//變量作用域為函數內部，外部無法訪問  
	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

閉包的原理

以計數器為例：

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() 調用的開始，都會創建一個新的詞法環境對象，以存儲該makeCounter 運行時的變量。

因此，我們有兩層嵌套的詞法環境：

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

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

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

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

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

改（在變量所在的詞法環境中更新變量）。

這是執行后的狀態：

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

垃圾收集

簡介

通常，函數調用完成后，會將詞法環境和其中的所有變量從內存中刪除，因為現在沒有任何對它們的引用了。

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

如果在函數執行完成后，詞法環境仍然可達，則此嵌套函數仍然有效。例如：

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

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

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

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

在下面的代碼中，嵌套函數被刪除后，其封閉的詞法環境（以及其中的 value ）也會被從內存中刪除：

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

實際開發中的優化

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

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

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

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

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

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

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

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

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

結果：輸出：Surprise。 

看完了這篇文章，相信你對“JavaScript閉包原理及作用的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！