参考源址:https://developer.mozilla.org/cn/docs/Web/JavaScript/Closures
闭包是指能够访问自由变量的函数 (变量在本地使用,但在闭包中定义)。换句话说,定义在闭包中的函数可以“记忆”它被创建时候的环境。
词法作用域
考虑如下的函数:
函数 init()
创建了一个局部变量 name
,然后定义了名为 displayName()
的函数。 displayName()
是一个内部函数——定义于 init()
之内且仅在该函数体内可用。displayName()
没有任何自己的局部变量,然而它可以访问到外部函数的变量,即可以使用父函数中声明的 name
变量。
frameborder="0" src="https://jsfiddle.net/xAFs9/3/embedded/js,result/" height="200" width="100%" style="margin: 0px; padding: 0px; border-width: 0px; max-width: 100%;">
运行代码可以发现这可以正常工作。这是词法作用域的一个例子:在 JavaScript 中,变量的作用域是由它在源代码中所处位置决定的(显然如此),并且嵌套的函数可以访问到其外层作用域中声明的变量。
闭包
现在来考虑如下的例子:
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
运行这段代码的效果和之前的 init()
示例完全一样:字符串 "Mozilla" 将被显示在一个 JavaScript 警告框中。其中的不同 — 也是有意思的地方 — 在于 displayName()
内部函数在执行前被从其外围函数中返回了。
这段代码看起来别扭却能正常运行。通常,函数中的局部变量仅在函数的执行期间可用。一旦 makeFunc()
执行过后,我们会很合理的认为 name 变量将不再可用。虽然代码运行的没问题,但实际并不是这样的。
这个谜题的答案是 myFunc
变成一个 闭包 了。 闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。在我们的例子中,myFunc
是一个闭包,由displayName
函数和闭包创建时存在的 "Mozilla" 字符串形成。
下面是一个更有意思的示例 — makeAdder
函数:
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
在这个示例中,我们定义了 makeAdder(x)
函数:带有一个参数 x
并返回一个新的函数。返回的函数带有一个参数 y
,并返回 x
和 y
的和。
从本质上讲,makeAdder
是一个函数工厂 — 创建将指定的值和它的参数求和的函数,在上面的示例中,我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和,另一个和 10 求和。
add5
和 add10
都是闭包。它们共享相同的函数定义,但是保存了不同的环境。在 add5
的环境中,x
为 5。而在 add10
中,x
则为 10。
实用的闭包
理论就是这些了 — 可是闭包确实有用吗?让我们看看闭包的实践意义。闭包允许将函数与其所操作的某些数据(环境)关连起来。这显然类似于面向对象编程。在面对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联。
因而,一般说来,可以使用只有一个方法的对象的地方,都可以使用闭包。
在 Web 中,您可能想这样做的情形非常普遍。大部分我们所写的 Web JavaScript 代码都是事件驱动的 — 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键)。我们的代码通常添加为回调:响应事件而执行的函数。
以下是一个实际的示例:假设我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定body
元素的 font-size
,然后通过相对的 em 单位设置页面中其它元素(例如页眉)的字号:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;