在JS当中,一个函数可以访问其外部的变量资源。
一个典型的代码
但以下这种情况会出错。
function m1(){
var a = 100;
console.log(a++);
}
function m2(){
console.log(a++); //这里无法访问a
}
如果,我们想在m2的作用域里,访问m1里的变量,就像下面这样:
首先,我们可以在m1的内部创建一个函数m3
function m1(){
var a = 100;
function m3(){
console.log(a++);
}
}
m3可以正常访问a,接下来我们增加一个return操作。
function m1(){
var a = 100;
return function m3(){
console.log(a++);
}
}
既然有了返回值,那我们不妨接收一下,继续编写代码如下:
function m1(){
var a = 100;
return function m3(){
console.log(a++);
}
}
var _m3 = m1();
我们执行了函数m1, 并将返回值赋值给_m3,
那么目前_m3和m3函数是等价的,即它们是同一个函数。
有了_m3,一切都好办了。我们继续编写代码
function m1(){
var a = 100;
return function m3(){
console.log(a++);
}
}
var _m3 = m1();
function m2(){
_m3();
}
因为_m3是全局变量,因此m2可以调用_m3
也就等价于m2间接的,访问到了变量a
通常,我们管m3,叫做一个『 闭包函数 』
应用场景一:setTimeout
原生的setTimeout有一个缺陷,你传递的第一个函数不能带参数。即
setTimeout(func(parma),1000);
这样的语句是不生效的(不过在不同浏览器中有不同的错误,总之都无法达到预期效果)
这时,我们就可以用闭包来实现这个效果了。
function func(param) {
return function() {
alert(param);
}
}
var f = func(1)
setTimeout(f, 1000);