Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 閉包

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

私有變量可以用到閉包。


全局變量

函數可以訪問?由函數內部定義的變量,如:

實例

function myFunction() {
var a = 4;
return a * a;
}

嘗試一下»

函數也可以訪問函數外部定義的變量,如:

實例

var a = 4;
function myFunction() {
return a * a;
}

嘗試一下»

後面一個實例中, a是一個全局變量。

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

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

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

局部變量只能用於定義它函數內部。 對於其他的函數或腳本代碼是不可用的。

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

Note 變量聲明是如果不使用var關鍵字,那麼它就是一個全局變量,即便它在函數內定義。


變量生命週期

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

而在函數內部聲明的變量,只在函數內部起作用。 這些變量是局部變量,作用域是局部性的;函數的參數也是局部性的,只在函數內部起作用。


計數器困境

設想下如果你想統計一些數值,且該計數器在所有函數中都是可用的。

你可以使用全局變量,函數設置計數器遞增:

實例

var counter = 0;

function add() {
counter += 1;
}

add();
add();
add();

// 計數器現在為3

嘗試一下»

計數器數值在執行add() 函數時發生變化。

但問題來了,頁面上的任何腳本都能改變計數器,即便沒有調用add() 函數。

如果我在函數內聲明計數器,如果沒有調用函數將無法修改計數器的值:

實例

function add() {
var counter = 0;
counter += 1;
}

add();
add();
add();

// 本意是想輸出3, 但事與願違,輸出的都是1 !

嘗試一下»

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

JavaScript內嵌函數可以解決該問題。


JavaScript 內嵌函數

所有函數都能訪問全局變量。

實際上,在JavaScript 中,所有函數都能訪問它們上一層的作用域。

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

該實例中,內嵌函數plus()可以訪問父函數的counter變量:

實例

function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}

嘗試一下»

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

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

我們需要閉包。


JavaScript 閉包

還記得函數自我調用嗎? 該函數會做什麼?

實例

var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();

add();
add();
add();

// 計數器為3

嘗試一下»

實例解析

變量add指定了函數自我調用的返回字值。

自我調用函數只執行一次。 設置計數器為0。 並返回函數表達式。

add變量可以作為一個函數使用。 非常棒的部分是它可以訪問函數上一層作用域的計數器。

這個叫作JavaScript 閉包。 它使得函數擁有私有變量變成可能。

計數器受匿名函數的作用域保護,只能通過add 方法修改。

Note 閉包是可訪問上一層函數作用域裡變量的函數,即便上一層函數已經關閉。