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

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

簡介

說明

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

閉包的定義

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

數(shù)被返回（壽命終結(jié)）了之后。

閉包的作用（特點(diǎn)）

1.函數(shù)嵌套函數(shù)

2.內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)或者變量

3.外部函數(shù)的參數(shù)和變量不會被垃圾回收，因?yàn)楸粌?nèi)部函數(shù)引用。

閉包與全局變量

閉包的用途

柯里化

可以通過參數(shù)來生成不同的函數(shù)。

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"));

結(jié)果

Hello,Tony

Hi,Tony

實(shí)現(xiàn)公有變量

需求：實(shí)現(xiàn)一個(gè)累加器，每次調(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());

結(jié)果

0

1

2

緩存

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

閉包可以做到這一點(diǎn)，因?yàn)樗粫尫磐獠康囊?，從而函?shù)內(nèi)部的值可以得以保留。

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

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'))

結(jié)果

1

封裝(屬性私有化)

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

let person = function(){
	//變量作用域?yàn)楹瘮?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());

結(jié)果

undefined

defaultName

Hello

閉包的原理

以計(jì)數(shù)器為例：

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

結(jié)果

0

1

2

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

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

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

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

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

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

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

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

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

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

垃圾收集

簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)果：報(bào)錯(cuò)：VM146:1 Uncaught ReferenceError: value is not defined

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

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

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

結(jié)果：輸出：Surprise。 

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