引入
闭包(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() 内部使用。