借用一句话,在js中我理解的闭包就是函数嵌套函数(反正我也是这么理解的),听那些大神的吧。
像这样:
function func1(){
function func2(){
}
function func2(){
}
}
那么问题来了,闭包到底有什么用呢?
内部函数可以调用外部函数的参数和变量,参数和变量是不会被垃圾回收机制回收的,也就是说变量一直都在内存中
function func1(){
var b = 1;
function func2(){
console.log(b);
}
return func2;
}
var fun = func1();
var b = 1;
function func2(){
console.log(b);
}
return func2;
}
var fun = func1();
fun();
看山的那边,海的那边就是结果
不明白?预知后事如何,请接着往下看吧
var b = 1;
function func1(){
b++;
console.log(b);
}
func1();
function func1(){
b++;
console.log(b);
}
func1();
func1();
function func1(){
var b = 1;
b++;
console.log(b);
}
func1();
func1();
b++;
console.log(b);
}
func1();
func1();
这个我知道,应该一个是全局变量,一个是局部变量嘛,是答对了,不过没加分。
我们都知道全局变量是会影响到程序性能的,所心好多语言都不推荐这样使用,只有在必要的时候才这样用。那要是我就不想2,就想3怎么办呢,这时候你也就用到闭包了。
满足你:
function func1(){
var b = 1;
return function func2(){
b++;
console.log(b);
}
}
var fun = func1();
fun();
var b = 1;
return function func2(){
b++;
console.log(b);
}
}
var fun = func1();
fun();
fun();
就样就得到3了,不过这样fun = func1();是要怎样啊?不喜欢,没关系还有这个
var fun = (function(){
var b = 1;
return function(){
b++;
console.log(b);
}
})();
fun();
fun();
var b = 1;
return function(){
b++;
console.log(b);
}
})();
fun();
fun();
偷偷告诉你,上面那个叫匿名函数。
我们来看看这段代码:
<body>
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
</body>
<script type="text/javascript">
window.onload = function(){
var oLis = document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
oLis[i].onclick = function(){
console.log(i);
};
}
};
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
</body>
<script type="text/javascript">
window.onload = function(){
var oLis = document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
oLis[i].onclick = function(){
console.log(i);
};
}
};
</script>
再看看这个结果:
注意了,是4个4,为什么呢,好像和我们想的有一点不一样,为什么都是4?
因为onclick函数是当你点击的时候才触发的,但是当你点击的时候for循环早就执行完了,所以你每次点击的时候,都是最后一个值。
那怎么才能依次是0,1,2,3呢,bingo就是闭包
<body>
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
</body>
<script type="text/javascript">
window.onload = function(){
var oLis = document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
(function(i){
oLis[i].onclick = function(){
console.log(i);
};
})(i);
}
};
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
</body>
<script type="text/javascript">
window.onload = function(){
var oLis = document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
(function(i){
oLis[i].onclick = function(){
console.log(i);
};
})(i);
}
};
</script>