闭包(Closure)
本文聚焦于回答2个问题:
- 在全局作用域中,如何读取函数内部的局部变量?
- 在全局作用域中,如何修改函数内部的局部变量?
变量作用域
JavaScript语言的作用域,一句话概括就是:内层函数可以访问外层函数的变量,而外层函
数不可以访问内层函数的变量。
在内层函数中定义的变量如果没使用var关键词,则该变量变为全局变量。通过这种方法定义
的全局变量,要在此函数执行后才有效。请看下面代码:
function outer() {
n = 820;
function inner() {
he = 835;
}
return inner;
}
// console.log(n);
// n is not defined
// 上面的错误会打断程序执行,如要测试下面的代码,需注释掉上面的代码
outer();
console.log(n); // 820
// console.log(he);
// n is not defined
(outer())();
console.log(he); // 835
如何从外部读取局部变量
通过闭包可以实现在全局作用域中访问函数内部变量。
function outer() {
var n = 820;
function inner() {
return n;
}
return inner;
}
var k = (outer())();
console.log(k); // 820
outer()
函数执行一次,将返回inner()
函数的引用,再执行一次inner()
函数,就成功的把局部变量n
返回出来。从而实现从外部读取内部变量。
如何从外部修改局部变量
通过闭包可以实现在全局作用域中修改函数内部变量。
var n = "hello";
function outer() {
var n = 820;
function get() {
return n;
}
function inc() {
n++;
}
return {
n: n,
get: get,
inc: inc
};
}
var result = outer();
console.log( result.n ); // 820
console.log( result.get() ); // 820
result.inc();
console.log( result.get() ); // 821
result.inc();
console.log( result.get() ); // 822
console.log( result.n ); // 820
outer()
函数返回一个对象,这个对象有1个属性,2个方法。正常情况下一个
函数调用完毕,其内部的变量将会被垃圾回收机制(garbage collection)回收。
也就是说这些变量已经不存在内存中,也没有办法读取这些变量的值,更没法修改。
但是,我们把outer()
函数的返回值赋给了一个全局变量,全局变量是始终存在
内存中的,而这个全局变量result
又使用到了outer()
函数的局部变量,所以
outer()
函数的局部变量,不会被清除,将一直保存在内存中。
因此,只要我们执行一次result.inc()
, outer()
函数里面的n
就会增加1。
而我们通过result.get()
就可以访问到outer()
函数里面的n
。
要注意result.n
的值始终是820,这里面的820只是n
变量的一个副本,一旦
outer()
函数执行完毕,result.n
就和n
没有关系了。
注意事项
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包
,否则会造成网页的性能问题。
参考资料
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html