JavaScript 閉包
JavaScript 變量可以是局部變量或全局變量。
私有變量可以用到閉包。
全局變量
函數可以訪問由函數內部定義的變量，如：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<p>函數可以訪問函數內部定義的變量:</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>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
函數也可以訪問函數外部定義的變量，如：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<p>函數可以訪問定義在函數外的變量：</p>
<button type="button" onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
后面一個實例中， a 是一個 全局變量。
在web頁面中全局變量屬于 window 對象。
全局變量可應用于頁面上的所有腳本。
在第一個實例中， a 是一個 局部變量。
局部變量只能用于定義它函數內部。對于其他的函數或腳本代碼是不可用的。
全局和局部變量即便名稱相同，它們也是兩個不同的變量。修改其中一個，不會影響另一個的值。
 | 變量聲明是如果不使用 var 關鍵字，那么它就是一個全局變量，即便它在函數內定義。 |
|---|
變量生命周期
全局變量的作用域是全局性的，即在整個JavaScript程序中，全局變量處處都在。
而在函數內部聲明的變量，只在函數內部起作用。這些變量是局部變量，作用域是局部性的；函數的參數也是局部性的，只在函數內部起作用。
計數器困境
設想下如果你想統(tǒng)計一些數值，且該計數器在所有函數中都是可用的。
你可以使用全局變量，函數設置計數器遞增：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<p>全局變量計數。</p>
<button type="button" onclick="myFunction()">計數!</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í)行 add() 函數時發(fā)生變化。
但問題來了，頁面上的任何腳本都能改變計數器，即便沒有調用 add() 函數。
如果我在函數內聲明計數器，如果沒有調用函數將無法修改計數器的值：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<p>局部變量計數。</p>
<button type="button" onclick="myFunction()">計數!</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>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
以上代碼將無法正確輸出，每次我調用 add() 函數，計數器都會設置為 1。
JavaScript 內嵌函數可以解決該問題。
JavaScript 內嵌函數
所有函數都能訪問全局變量。
實際上，在 JavaScript 中，所有函數都能訪問它們上一層的作用域。
JavaScript 支持嵌套函數。嵌套函數可以訪問上一層的函數變量。
該實例中，內嵌函數 plus() 可以訪問父函數的 counter 變量：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<p>局部變量計數。</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>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
如果我們能在外部訪問 plus() 函數，這樣就能解決計數器的困境。
我們同樣需要確保 counter = 0 只執(zhí)行一次。
我們需要閉包。
JavaScript 閉包
還記得函數自我調用嗎？該函數會做什么？
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<p>局部變量計數。</p>
<button type="button" onclick="myFunction()">計數!</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>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例解析
變量 add 指定了函數自我調用的返回字值。
自我調用函數只執(zhí)行一次。設置計數器為 0。并返回函數表達式。
add變量可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層作用域的計數器。
這個叫作 JavaScript 閉包。它使得函數擁有私有變量變成可能。
計數器受匿名函數的作用域保護，只能通過 add 方法修改。
| 閉包是可訪問上一層函數作用域里變量的函數，即便上一層函數已經關閉。 |
|---|