首頁 > web前端 > js教程 > 關於JavaScript 閉包的相關知識的了解與使用

關於JavaScript 閉包的相關知識的了解與使用

jacklove
發布: 2018-05-07 10:50:37
原創
1368 人瀏覽過

JavaScript 閉包全域變數和區域變數中發揮著重要的作用,本篇將對其的相關知識做出解說。

JavaScript 變數可以是局部變數或全域變數。

私有變數可以用到閉包。

全域變數

函數可以存取 函式內部定義的變量,如:

實例

function myFunction() {
    var a = 4;    return a * a;}
登入後複製

函數也可以存取函數外部定義的變數,如:

實例

var a = 4;function myFunction() {
    return a * a;}
登入後複製

後面一個實例中, a 是一個 全域 變數。

在web頁面中全域變數屬於 window 物件。

全域變數可套用於頁面上的所有腳本。

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

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

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

變數宣告時如果不使用 var 關鍵字,那麼它就是一個全域變量,即便它在函數內定義。   

變數生命週期

全域變數的作用域是全域性的,也就是在整個JavaScript程式中,全域變數處處都在。

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

計數器困境

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

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

實例

var counter = 0; 
function add() {
   return counter += 1;}
 add();add();add(); 
// 计数器现在为 3
登入後複製

計數器數值在執行 add() 函數時會改變。

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

如果我在函數內宣告計數器,如果沒有呼叫函數將無法修改計數器的值:

實例

function add() {
    var counter = 0;    return 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
登入後複製

全域變數和區域變數的閉包知識做了大致的了解,更多的學習資料清關注p​​hp中文網即可觀看。

相關推薦:

關於JavaScript 表單驗證的相關解說

JavaScript 彈窗事件的相關知識

JavaScript Date(日期) 相關知識與用法

#

以上是關於JavaScript 閉包的相關知識的了解與使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板