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程式中，全域變數處處都在。
而在函數內部宣告的變量，只在函數內部運作。這些變數是局部變量，作用域是局部性的；函數的參數也是局部性的，只在函數內部起作用。
計數器困境
設想下如果你想統計一些數值，且該計數器在所有函數中都是可用的。
你可以使用全域變量，函數設定計數器遞增：
實例
<!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>##執行實例»
點擊"運行實例" 按鈕查看線上實例
實例
<!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 支援巢狀函數。巢狀函數可以存取上一層的函數變數。
該實例中，內嵌函數
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
只執行一次。 我們需要閉包。
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 指定了函數自我呼叫的回傳字值。
自我呼叫函數只執行一次。設定計數器為 0。並返回函數表達式。
add變數可以當作一個函數使用。非常棒的部分是它可以存取函數上一層作用域的計數器。
這個叫作 JavaScript 閉包。 它使得函數擁有私有變數變成可能。
計數器受匿名函數的作用域保護，只能透過 add 方法修改。
| 已關閉是可存取上一層函數作用域裡變數的函數，即便上一層函數已經關閉。 |
|---|
