引入
闭包(Closure) 是JavaScript中的一个重要概念。它被广泛讨论,但仍然是一个混淆的概念。让我们来理解闭包是什么。
首先,让我们看看Douglas Crockford给出的闭包的定义:Closure
闭包意味着内部函数始终可以访问外部函数的变量和参数,即使外部函数已经返回。
我们可以在 JavaScript 中创建嵌套函数。内部函数可以访问外部函数的变量和参数(但是,不能访问外部函数的参数对象arguments)。
看看下面这个例子:
function OuterFunction() { var outerVariable = 1; function InnerFunction() { console.log(outerVariable); } InnerFunction(); // 1 }
InnerFunction() 可以访问 outerVariable
闭包特性 1:
function OuterFunction() { var outerVariable = 100; function InnerFunction() { alert(outerVariable); } return InnerFunction; } var innerFunc = OuterFunction(); innerFunc(); // 100
在上面的例子, 当调用 OuterFunction() 时,从 OuterFunction 返回InnerFunction 函数。变量 innerFunc 只引用InnerFunction(),而不是OuterFunction()。现在,当你调用 innerFunc() 时,它仍然可以访问在 OuterFunction() 中声明的 outerVariable。这就是闭包。
闭包特性 2
function Counter() { var counter = 0; function IncreaseCounter() { return counter += 1; }; return IncreaseCounter; } var counter = Counter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 console.log(counter()); // 4
闭包的一个重要特征是外部变量可以在多次调用之间保持其状态。请记住,内部函数不保留外部变量的单独副本,但它引用外部变量,这意味着如果您使用内部函数改变它,外部变量的值将被改变。
在上面的例子中,外部函数 Counter 返回内部函数 IncreaseCounter。增加 IncreaseCounter 将外部变量 counter 加1。因此多次调用 IncreaseCounter 函数将使 counter 多次加1。
闭包特性 3
function Counter() { var counter = 0; setTimeout( function () { var innerCounter = 0; counter += 1; console.log("counter = " + counter); setTimeout( function () { counter += 1; innerCounter += 1; console.log("counter = ", counter) console.log("innerCounter = ", innerCounter) }, 500); }, 1000); }; Counter();
闭包在多层内部函数中是有效的。
什么时候使用闭包呢?
闭包在 JavaScript 中隐藏实现细节时非常有用。换句话说,可以用来创建私有变量或函数。
var counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } }; })(); alert(counter.value()); // 0 counter.increment(); counter.increment(); alert(counter.value()); // 2 counter.decrement(); alert(counter.value()); // 1
在上面的示例中,increment()、decrement() 和 value()成为公共函数,因为它们包含在返回对象中,而changeBy() 函数成为私有函数,因为它没有返回,只被 increment() 和 decrement() 内部使用。