JavaScript閉包原理與用法學習筆記
本文實例講述了JavaScript閉包原理與用法。分享給大家供大家參考，具體如下：
閉包(Closure)
閉包是一個函數和詞法環(huán)境的組合，函數聲明在這個詞法環(huán)境中。
- 詞法作用域：
看下面的一個例子：
function init() {
var name = 'GaoPian';
// name是局部變量
function displayName() {
//displayName();是內部函數，一個閉包
alert(name); // 使用外部函數聲明的變量
}
displayName();
}
init();
init()創(chuàng)建了一個局部變量name和一個函數displayName()。
函數displayName()是一個已經定義在init()內部的函數，并且只能在函數init()里面才能訪問得到。
函數displayName()沒有自己的局部變量，但由于內部函數可以訪問外部函數變量，displayName()可以訪問到聲明在外部函數init()的變量name，如果局部變量還存在的話，displayName()也可以訪問他們。
- 閉包
看下面一個例子
function makeFunc() {
debugger
var name = 'GaoPian';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
運行這段代碼和之前init()的方法的效果是一樣。
經過debugger一遍之后發(fā)現：
二者不同之處是，displayName()在執(zhí)行之前，這個內部方法是從外部方法返回來的。
首先，代碼還是會正確運行，在一些編程語言當中，一個函數內的局部變量只存在于該函數的執(zhí)行期間，隨后會被銷毀，一旦makeFunc()函數執(zhí)行完畢的話，變量名就不能夠被獲取，但是，由于代碼仍然正常執(zhí)行，這顯然在JS里是不會這樣的。這是因為函數在JS里是以閉包的形式出現的。
閉包是一個函數和詞法作環(huán)境的組合，詞法環(huán)境是函數被聲明的那個作用域，這個執(zhí)行環(huán)境包括了創(chuàng)建閉包時同一創(chuàng)建的任意變量，即創(chuàng)建的這個函數和這些變量處于同一個作用域當中。在這個例子當中，myFunc()是displayName()的函數實例，makeFunc創(chuàng)建的時候，displayName隨之也創(chuàng)建了。displayName的實例可以獲得詞法作用域的引用，在這個詞法作用域當中，存在變量name，對于這一點，當myFunc調用的話，變量name，仍然可以被調用，因此，變量'GaoPian'傳遞給了alert函數。
這里還有一個例子
function makeAdder(x) {
return function (y) {
return x + y;
}
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
在這個例子當中，我們定義了一個函數makeAdder(x)，傳遞一個參數x，并且返回一個函數，這個返回函數接收一個參數y，并返回x和y的和。
實際上，makeAdder是一個工廠模式：它創(chuàng)建了一個函數，這個函數可以計算特定值的和。在上面這個例子當中，我們使用工廠模式來創(chuàng)建新的函數， 一個與5進行加法運算——add5，一個與10進行加法運算——add10。add5和add10都是閉包，他們共享相同的函數定義，但卻存儲著不同的詞法環(huán)境，在add5的詞法環(huán)境當中，x為5；在add10的詞法環(huán)境當中，x變成了10。
- 閉包的實踐
閉包是很有用的，因為他讓我們把一些數據（詞法環(huán)境）和一些能夠獲取這些數據的函數聯系起來，這有點和面向對象編程類似，在面向對象編程當中，對象讓我們可以把一些數據（對象的屬性）和一個或多個方法聯系起來。
因此，你能夠像對象的方法一樣隨時使用閉包。實際上，大多數的前端JS代碼都是事件驅動性的：我們定義一些事件，當這個事件被用戶所觸發(fā)的時候（例如用戶的點擊事件和鍵盤事件），我們的事件通常會帶上一個回調：即事件觸發(fā)所執(zhí)行的函數。舉個栗子，假設我們希望在頁面上添加一些按鈕，這些按鈕能夠調整文字的大小，實現這個功能的方式是確定body的字體大小，然后再設置頁面上其他元素（例如標題）的字體大小，我們使用em作為單位。
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
</style>
我們設置的調節(jié)字體大小的按鈕能夠改變body的font-size，并且這個調節(jié)能夠通過相對字體單位，反應到其他元素上，
function makeSizer(size) {
return function () {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
size12,size14,size16是三個分別把字體大小調整為12,14,16的函數，我們可以把他們綁定在按鈕上。
<button id="size-12">12</button> <button id="size-14">14</button> <button id="size-16">16</button>
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
通過閉包來封裝私有方法：類似JAVA語言能夠聲明私有方法，意味著只能夠在相同的類里面被調用，JS無法做到這一點，但卻可以通過閉包來封裝私有方法。私有方法不限制代碼：他們提供了管理命名空間的一種強有力方式。
下面代碼闡述了怎樣使用閉包來定義公有函數，公有函數能夠訪問私有方法和屬性。
var counter = (function () {
debugger;
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function () {
changeBy(1);
},
decrement: function () {
changeBy(-1);
},
value: function () {
return privateCounter;
}
};
})();
console.log(counter.value());// 0
counter.increment();
counter.increment();
console.log(counter.value());// 2
counter.decrement();
console.log(counter.value()); // 1
在之前的例子當中，每個閉包具有他們自己的詞法環(huán)境，而在這個例子中，我們創(chuàng)建了一個單獨的詞法環(huán)境，這個詞法環(huán)境被3個函數所共享，這三個函數是counter.increment, counter.decrement和counter.value。
共享的詞法環(huán)境是由匿名函數創(chuàng)建的，一定義就可以被執(zhí)行，詞法環(huán)境包含兩項：變量privateCounter和函數changeBy，這些私有方法和屬性不能夠被外面訪問到，然而，他們能夠被返回的公共函數訪問到。這三個公有函數就是閉包，共享相同的環(huán)境，JS的詞法作用域的好處就是他們可以互相訪問變量privateCounter和changeBy函數。
下面一個例子：
var makeCounter = function () {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function () {
changeBy(1);
}, decrement: function () {
changeBy(-1);
}, value: function () {
return privateCounter;
}
}
};
var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value());
/* Alerts 0 */
counter1.increment();
counter1.increment();
alert(counter1.value());
/* Alerts 2 */
counter1.decrement();
alert(counter1.value());
/* Alerts 1 */
alert(counter2.value());
/* Alerts 0 */
兩個計數器counter1和counter2分別是互相獨立的，每個閉包具有不同版本的privateCounter，每次計數器被調用，詞法環(huán)境會改變變量的值，但是一個閉包里變量值的改變并不影響另一個閉包里的變量。
- 循環(huán)中創(chuàng)建閉包：常見錯誤
看下面一個例子：
<p id="help">Helpful notes will appear here</p> <p>E-mail: <input type="text" id="email" name="email"> </p> <p>Name: <input type="text" id="name" name="name"> </p> <p>Age: <input type="text" id="age" name="age"> </p>
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function () {
showHelp(item.help);
}
}
}
setupHelp();
helpText 數組定義了三個有用的hint，每個分別與輸入框的id相對應，每個方法與onfocus事件綁定起來。當你運行這段代碼的時候，不會像預期的那樣工作，不管你聚焦在哪個輸入框，始終顯示你的age信息。
原因在于，分配給onfocus事件的函數是閉包，他們由函數定義構成，從setupHelp函數的函數作用域獲取。三個閉包由循環(huán)所創(chuàng)建，每個閉包具有同一個詞法環(huán)境，環(huán)境中包含一個變量item.help,當onfocus的回調執(zhí)行時，item.help的值也隨之確定，循環(huán)已經執(zhí)行完畢，item對象已經指向了helpText列表的最后一項。
解決這個問題的方法是使用更多的閉包，具體點就是提前使用一個封裝好的函數：
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function makeHelpCallback(help) {
return function () {
showHelp(help);
};
}
function setupHelp() {
var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}
setupHelp();
上面代碼運行正常，回調此時不共享一個詞法環(huán)境，makeHelpCallback函數給每個回調創(chuàng)造了一個詞法環(huán)境，詞法環(huán)境中的help指helpText數組中對應的字符串，使用匿名閉包來重寫的例子如下：
- function showHelp(help) { document.getElementById('help').innerHTML = help; } function setupHelp() { var helpText = [{'id': 'email', 'help': 'Your e-mail address'}, {'id': 'name', 'help': 'Your full name'}, {'id': 'age', 'help': 'Your age (you must be over 16)'}]; for (var i = 0; i < helpText.length; i++) { (function () { var item = helpText[i]; document.getElementById(item.id).onfocus = function () { showHelp(item.help); } })(); // Immediate event listener attachment with the current value of item (preserved until iteration). } } setupHelp();
如果不想使用閉包，也可以使用ES6的let關鍵字：
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}];
for (var i = 0; i < helpText.length; i++) {
let item = helpText[i];
document.getElementById(item.id).onfocus = function () {
showHelp(item.help);
}
}
}
setupHelp();
這個例子使用let代替var，所以，每個閉包綁定了塊級作用域，也就意味著不需要額外的閉包。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要介紹了詳細討論JavaScript中的求值策略，對求值策略感興趣的同學，可以參考下2021-04-04
這篇文章主要介紹了利用Keydown事件阻止用戶輸入的具體實現,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了小程序實現錄音上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了JS監(jiān)聽組合按鍵思路及實現過程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04
我們先看到的未開始的頁面黑色和白色方塊是隨機生成的，完了這么多把沒有發(fā)現時固定不變的。點擊一次方塊，程序需要判斷是黑色還是白色的。如果是黑色的，當然程序也是實現了一次自減，在動畫中是實現一次下移的，下移的時候點擊的方塊到黃顏色的區(qū)域會變成灰色2015-11-11
這篇文章主要介紹了基于JS開發(fā)微信網頁錄音功能的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
下面小編就為大家?guī)硪黄猨s基礎之DOM中document對象的常用屬性方法詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文通過實例代碼給大家介紹了定制FileField中的上傳文件名稱問題，感興趣的朋友參考下吧2017-08-08
div+css模擬js信息框的類庫時遇到一個問題當沒有傳遞參數過去時自動使用提示信息作為窗口標題，具體的實現如下2014-02-02
這篇文章主要介紹了JavaScript手寫Promise核心原理，promise?可以說是出場率很高的api了，這篇文章手寫一版promise,可以加強對promise的認識2022-06-06