在网上看了很多关于闭包的讲解,都晦涩难懂,最近看到了阮一峰老师的文章,对闭包有了比较清晰的认识,现在把它整理出来。
一、变量的作用域
理解闭包之前,先要知道javascript的变量作用域 .
两种作用域:全局变量,局部变量.
javascript的特殊在于函数内部可以直接访问全局变量。
var n =10;
function f1(){
console.log(n);
}
f1(); //10
当然在函数外部无法访问函数内的局部变量
function f1(){
var n =10
}
console.log(n); // n is not defined
还有一种情况是,在函数内部声明变量的时候,没有使用var命令,那么就实际上是声明了一个全局变量!这可能会造成全局变量污染,谨慎使用。
function f1(){
n =10;
}
f1();
console.log(n); // 10
二、从外部如何获取局部变量?
在写代码的过程中,由于各种原因我们可能需要去读取函数内部的局部变量,但是正常情况下是做不到的,只有想另外的办法。
那就是在函数内部,再定义一个函数
function f1(){
var n = 10;
function f2(){
consolo.log(n); //10
}
}
上面的代码中,函数f2在函数f1内部,这时f1的局部变量对 f2是可见的,但是f2的局部变量对f1是不可见的。这就是javascript语言特有的链式作用域结构,子对象可以一级一级的向上寻找父对象的变量。所以父对象的所有变量对子对象是可见的,反之却不可以。
既然f2已经可以读取f1的变量,那么只要把f2作为返回值,那么我们不就可以在f1外部读取f2的变量了吗!
function f1 (){
var n =10;
return function f2(){
console.log(n)
}
}
var result = f1();
result(); // 10
三、闭包的概念
上一节代码中的f2就是闭包 。
闭包就是能够读取其他函数内部变量的函数。在javascript 里面只要函数内部的子函数可以读取局部变量,因此可以把闭包简单的理解为‘定义在函数内部的函数’。
所以本质上,闭包就是函数内部和函数外包连接起来的一个桥梁。
四、闭包的用途
有两个大的好处,一个是读取函数内部的变量,另一个就是让这些变量的值一直保存在内存中。
function f1(){
var n =10;
add = function (){
n+=1;
}
function f2(){
console.log(n);
}
return f2;
}
var result = f1();
result(); //10
add();
result(); // 11
在这段代码中,result其实就是局部函数f2。它一共运行了2次,一次是10,一次是11,这就证明了函数f1的局部变量一直保存在内存中,并没有在f2调用以后自动清除。
为什么会这样呢?原因在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2依赖于f1,因此f1也始终保存在内存中,不会在调用结束后,被垃圾回收站机制回收。 。
还有值得注意的地方是,add 函数没有使用var声明,因此add是一个全局变量。其次add 是一个匿名函数,而这个匿名函数本身就是一个闭包,可以在函数外部对函数内部的变量进行操作。
五、使用闭包的注意点
- 由于闭包会使得函数中的变量保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页性能问题,还有可能导致内存泄漏。解决方法就是在退出函数之前,将不使用的局部变量全部删除。
- 闭包会在父函数外部改变父函数内部变量的值。所以如果把父函数当作对象使用时,把闭包当作它的公用方法,把内部变量当作私有属性时,这时一定要小心,不要随意改变父函数内部的变量值。
六、思考题
理解下面两段代码的运行结果,基本就算理解闭包的运行机制了。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //The window
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //My Object