JavaScript 閉包

JavaScript 變量可以是局部變量或全局變量。

私有變量可以用到閉包。

全局變量

函數(shù)可以訪問由函數(shù)內(nèi)部定義的變量，如：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p>函數(shù)可以訪問函數(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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

函數(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 = 4;
function myFunction() {
	document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

后面一個實例中， a 是一個全局變量。

在web頁面中全局變量屬于 window 對象。

全局變量可應用于頁面上的所有腳本。

在第一個實例中， a 是一個局部變量。

局部變量只能用于定義它函數(shù)內(nèi)部。對于其他的函數(shù)或腳本代碼是不可用的。

全局和局部變量即便名稱相同，它們也是兩個不同的變量。修改其中一個，不會影響另一個的值。

	變量聲明是如果不使用 var 關鍵字，那么它就是一個全局變量，即便它在函數(shù)內(nèi)定義。

變量生命周期

全局變量的作用域是全局性的，即在整個JavaScript程序中，全局變量處處都在。

而在函數(shù)內(nèi)部聲明的變量，只在函數(shù)內(nèi)部起作用。這些變量是局部變量，作用域是局部性的；函數(shù)的參數(shù)也是局部性的，只在函數(shù)內(nèi)部起作用。

計數(shù)器困境

設想下如果你想統(tǒng)計一些數(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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

計數(shù)器數(shù)值在執(zhí)行 add() 函數(shù)時發(fā)生變化。

但問題來了，頁面上的任何腳本都能改變計數(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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

以上代碼將無法正確輸出，每次我調用 add() 函數(shù)，計數(shù)器都會設置為 1。

JavaScript 內(nèi)嵌函數(shù)可以解決該問題。

JavaScript 內(nèi)嵌函數(shù)

所有函數(shù)都能訪問全局變量。

實際上，在 JavaScript 中，所有函數(shù)都能訪問它們上一層的作用域。

JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問上一層的函數(shù)變量。

該實例中，內(nèi)嵌函數(shù) plus() 可以訪問父函數(shù)的 counter 變量：

實例

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

如果我們能在外部訪問 plus() 函數(shù)，這樣就能解決計數(shù)器的困境。

我們同樣需要確保 counter = 0 只執(zhí)行一次。

我們需要閉包。