JavaScript 閉包
JavaScript 變數(shù)可以是局部變數(shù)或全域變數(shù)。
私有變數(shù)可以用到閉包。
全域變數(shù)
函數(shù)可以存取 由函數(shù)內(nèi)部定義的變量，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>訪問函數(shù)內(nèi)部定義的變量:</p>
<button type="button" onclick="myFunction()">查看</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>執(zhí)行程式嘗試一下
函數(shù)也可以存取函數(shù)外部定義的變量，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>函數(shù)可以訪問定義在函數(shù)外的變量：</p>
<button type="button" onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
var a = 5;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>執(zhí)行程式嘗試
後面一個實例中，?a?是一個?全域變數(shù)。
在web頁面中全域變數(shù)屬於 window 物件。
全域變數(shù)可套用於頁面上的所有腳本。
在第一個實例中，?a?是一個?局部?變數(shù)。
局部變數(shù)只能用來定義它函數(shù)內(nèi)部。對於其他的函數(shù)或腳本程式碼是不可用的。
全域和局部變數(shù)即便名稱相同，它們也是兩個不同的變數(shù)。修改其中一個，不會影響另一個的值。
提示：變數(shù)宣告是果實不使用?var?關(guān)鍵字，那麼它就是一個全域變量，即便它在函數(shù)內(nèi)定義。
變數(shù)生命週期
全域變數(shù)的作用域是全域性的，即在整個JavaScript程式中，全域變數(shù)處處都在。
而在函數(shù)內(nèi)部宣告的變量，只在函數(shù)內(nèi)部運作。這些變數(shù)是局部變量，作用域是局部性的；函數(shù)的參數(shù)也是局部性的，只在函數(shù)內(nèi)部起作用。
計數(shù)器困境
設(shè)想下如果你想統(tǒng)計一些數(shù)值，且該計數(shù)器在所有函數(shù)中都是可用的。
你可以使用全域變量，函數(shù)設(shè)定計數(shù)器遞增：
#實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>全局變量計數(shù)。</p>
<button type="button" onclick="myFunction()">計數(shù)!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>執(zhí)行程式嘗試
計數(shù)器數(shù)值在執(zhí)行add() 函數(shù)時會改變。
但問題來了，頁面上的任何腳本都能改變計數(shù)器，即使沒有呼叫 add() 函數(shù)。
如果我在函數(shù)內(nèi)宣告計數(shù)器，如果沒有呼叫函數(shù)將無法修改計數(shù)器的值：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>局部變量計數(shù)。</p>
<button type="button" onclick="myFunction()">計數(shù)!</button>
<p id="demo">0</p>
<script>
function add() {
var counter = 0;
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>執(zhí)行程式嘗試一下
以上程式碼將無法正確輸出，每次我呼叫add() 函數(shù)，計數(shù)器都會設(shè)定為1。
JavaScript 內(nèi)嵌函數(shù)可以解決這個問題。
JavaScript 內(nèi)嵌函數(shù)
所有函數(shù)都能存取全域變數(shù)。??
實際上，在 JavaScript 中，所有函數(shù)都能存取它們上一層的作用域。
JavaScript 支援巢狀函數(shù)。巢狀函數(shù)可以存取上一層的函數(shù)變數(shù)。
該實例中，內(nèi)嵌函數(shù)?plus()?可以存取父函數(shù)的?counter?變數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>局部變量計數(shù)。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html執(zhí)行程式嘗試一下
如果我們能在外部存取plus()?函數(shù)，這樣就能解決計數(shù)器的困境。
我們同樣需要確保?counter = 0?只執(zhí)行一次。
我們需要閉包。
JavaScript 閉包
#還記得函數(shù)自我呼叫嗎？該函數(shù)會做什麼？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>局部變量計數(shù)。</p>
<button type="button" onclick="myFunction()">計數(shù)!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>執(zhí)行程式試試看
實例解析
變數(shù)?add?指定了函數(shù)自我呼叫的回傳字值。
自我呼叫函數(shù)只執(zhí)行一次。設(shè)定計數(shù)器為 0。並返回函數(shù)表達式。
add變數(shù)可以當作一個函數(shù)使用。非常棒的部分是它可以存取函數(shù)上一層作用域的計數(shù)器。
這個叫作 JavaScript?閉包。它使得函數(shù)擁有私有變數(shù)變成可能。
計數(shù)器受匿名函數(shù)的作用域保護，只能透過 add 方法修改。
提示：閉包是可存取上一層函數(shù)作用域裡變數(shù)的函數(shù)，即使上一層函數(shù)已經(jīng)關(guān)閉。 ? ?
