之前看过一些关于闭包的文章,当时对闭包的理解还是不够透彻,前些天又回顾了《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试试吧。