之前看过一些关于闭包的文章，当时对闭包的理解还是不够透彻，前些天又回顾了《JavaScript高级程序设计第三版》中的闭包章节，对闭包有了新的理解。
初识闭包
闭包 实际上是通过调用一个函数有权访问另一个函数作用域中的变量。切记 闭包 不是 匿名函数，要搞清楚概念。但在闭包中会经常使用匿名函数。
首先来看一个最简单的闭包案例，让你对闭包有一个简单的认识，毕竟入门第一个案例，所以不涉及匿名函数，也不涉及函数表达式立即执行等高级玩意儿。
function A() {
var name = '闭包';
function B() {
console.log("Hello " + name + "!");
}
return B;
}
var C = A();
C();
这是一个不能再简单了的闭包案例，以下是代码分析。
- 定义了一个普通函数A
- 在A中定义了一个name变量、一个函数B
- 在A中返回一个B的引用（因为function是引用类型）
- 执行A，返回B的引用赋值给C
- 执行C（此时C引用的是B）
- 结果为 Hello 闭包！
从上例中可以看出，外部C引用了内部函数B，可以访问函数A作用域内的所有变量。
这也是闭包的基本概念：外部作用域通过函数内部返回引用，有权访问该函数作用域中的变量。
不需要死记概念，如果你完成了上述的前5步，已经形成了一个闭包。
垃圾回收
一般情况下，当函数执行完毕后，局部活动对象就会被销毁，也就是所谓的垃圾回收机制，内存里面只存有全局变量。但闭包则不一样，因为闭包通常返回了一个引用，由于该引用没有解除，所以局部活动对象仍然留在内存中。
为了证实在闭包情况下不解除引用，局部活动对象不会被垃圾回收，在第一个例子中稍加改进后如下：
function A() {
var count = 0;
function B() {
console.log(++count);
}
return B;
}
var C = A();
C(); // 1
C(); // 2
C(); // 3
C = null; // 解除引用
C =A();
C(); // 1
- 在A中定义了一个 count 变量、和函数B
- 在B中对 count 做自增运算并输出控制台
- 在A中返回函数B的引用
- 执行函数A，并把返回的结果赋值给C
- 执行3次C
- 解除变量C的引用
- 再次执行函数A，并把返回的结果赋值给C
- 执行1次C
通过上面的例子可以发现，如果不解除C的引用，函数A中的count一直在内存中，但count却不是全局变量。当不想污染全局变量却需要使变量一直停留在内存以便使用的时候，可以使用闭包，这也是闭包有优点。在使用闭包过程中一定要注意内存泄露，当该变量不在有使用价值的时候，立刻解除引用。
闭包写法
在jQuery、zepto等一系列框架中，闭包都是配合匿名函数，以及函数自执行来配合使用的。所以前面也强调过 闭包不是匿名函数，匿名函数也不是闭包。所以在开讲之前，必须要弄清楚什么叫函数申明，什么叫函数表达式。
函数声明
以下就是一个最简单的函数声明：
set(); // hello
function set() {
console.log('hello');
}
函数申明有一个特征就是函数申明提升，在执行代码之前会先读取函数申明，这意味着函数的申明可以放在调用它的语句后面。
函数表达式
以下就是一个最简单的函数声明：
set(); // 报错，函数不存在
var set = function () {
console.log('hello');
}
函数表达式因为是表达式，所以必须一行一行的读取，所以会报错。
在这里不讨论它们的先后顺序错误，只需要感受一下函数申明与函数表达式的区别。
弄清楚函数表达式基本写法，那么可以下面这个例子。
var set = function (n) {
console.log('hello' + n);
}
set('Riny'); // 结果为 helloRiny
/* ---------------- */
(function() {
console.log('hello');
})('Riny'); // 结果为 helloRiny
上面的第二种写法是申明一个匿名函数，为匿名函数前后添加括号，转换为表达式，然后在表达式的后面传参执行。为此有一个专门的叫法：立即调用的函数表达式（IIFE），这里必须要理解括号的作用。
// 函数表达式
(function () { /* 函数体 */ });
// 函数声明
function () { /* 函数体 */ }
// 立即调用的函数表达式
(function () { /* 函数体 */ })();
下面看一个真正的闭包案例：
(function (doc) {
var viewport;
function init(id) {
viewport = doc.querySelector("#"+id);
}
function addChild(child) {
viewport.appendChild(child);
}
function removeChild(child) {
viewport.removeChild(child);
}
window.operateElem = {
init: init,
addChild: addChild,
removeChild: removeChild
};
})(document);
- 定义了一个立即调用的函数表达式（IIFE），执行时传递一个参数document
- 在函数表达式内部，定义了一个变量viewport、和三个函数
- 通过全局变量把内部的三个函数，以对象的形式返回给 **window.operateElem **
- 与此同时三个函数共享一个viewport变量
这里没有使用 ruturn 语句，而是直接把要返回的值赋值给全局变量window.operateElem。这样就可以使用这些方法oprateElem.init()，oprateElem.addChild()，oprateElem.removeChild()。从而减少了全局变量污染。只有解除掉引用，立即调用的函数表达式的活动对象才会从内存中销毁。
结尾
闭包的知识点还不知这些，比如匿名函数的this问题，执行环境、活动对象、作用域链等知识，所以想要深刻理解闭包，一定要系统化的去学习JavaScript，这样才能有助于你更深层次的理解。本篇内容到这里就结束了，赶紧写个Demo试试吧。
网友评论