概念
js支持嵌套函数，嵌套函数可以访问上一级的函数变量。
闭包是指函数能使用另一个函数的变量。
或者说:是子函数能使用父函数的变量和参数。
问题
菜鸟中关于闭包的问题，说了一个计数器困境。
困境是指：
如果将counter作为全局变量，那么不用调用add()也能改变counter值。
<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
//这里直接counter++也可改变值
</script>而如果作为局部变量，如下，则每次counter都为1。
<script>
function add() {
var counter = 0;
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>正确结果如下：
然而最后这段代码很疑惑，为什么var counter = 0;只执行了一次？
<body>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
//变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>解答：
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
我们通常会想当然的认为每次调用 add() 都会重走一遍add()中的代码块, 但其实不然。
注意add方法中的return,它return了一个方法,并且把这个方法赋值给了add变量。
那么在这个function自运行一遍之后,其实==最后赋值给add的是return counter += 1== 这段代码。
所以后面每次调用add() 其实都是在调用return counter += 1。
再结合文章之前所说的, 闭包会持有父方法的局部变量并且不会随父方法销毁而销毁, 所以这个counter其实就是来自于第一次function执行时创建的变量。
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
