JavaScript 閉包

Richard852555發表於2022-06-26
先看問題的引入:

可以實現計數器,但是變數counter在函式外,不是函式的私有變數。

var counter = 0;

// 遞增計數器的函式
function add() {
counter += 1;
return counter;
}

function myFunction(){
document.getElementById(“demo”).innerHTML = add();
}

為了防止別的函式修改這個變數,需要達到效果是這個變數只能讓這個函式訪問。
頁面上的任何程式碼都可以更改計數器,而無需呼叫 add()。

 對於 add() 函式,計數器應該是區域性的,以防止其他程式碼更改它:

// 遞增計數器的函式
function add() {
var counter = 0;
counter += 1;
return counter;
}

// 呼叫三次 add()
add();
add();
add();

//此時計數器應該是 3。但它是 1。

它沒有用,因為我們每次呼叫函式時都會重置本地計數器。

解決:

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

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

// 計數器目前是 3

例子解釋

變數 add 的賦值是自呼叫函式的返回值。

這個自呼叫函式只執行一次。它設定計數器為零(0),並返回函式表示式。

這樣 add 成為了函式。最“精彩的”部分是它能夠訪問父作用域中的計數器。

這被稱為 JavaScript 閉包。它使函式擁有“私有”變數成為可能。

計數器被這個匿名函式的作用域保護,並且只能使用 add 函式來修改。

閉包指的是有權訪問父作用域的函式,即使在父函式關閉之後。

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章