JavaScript 闭包

先看问题的引入：

可以实现计数器，但是变量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 协议》，转载必须注明作者和本文链接