JavaScript闭包原理与用法实例分析
33 浏览量
2020-12-02
11:56:08
上传
评论
收藏 97KB PDF 举报
JavaScript闭包原理与用法实例分析闭包原理与用法实例分析
本文实例讲述了JavaScript闭包原理与用法。分享给大家供大家参考，具体如下：
1、与闭包有关的两个概念：、与闭包有关的两个概念：
1) 变量的作用域变量的作用域
不带有关键字var的变量会成为全局变量；
在函数中使用关键字var声明的变量是局部变量。
局部变量只有在函数内部才能访问到，在函数外面是访问不到的。但在函数内部可以通过作用域链一直向上搜索直到全局对
象，也就是说，函数内部可以访问函数外部的变量。
2) 变量的生存周期变量的生存周期
对于全局变量，其生存周期是永久的，除非主动销毁这个全局变量；
而对于在函数内用关键字var声明的局部变量，当退出函数时，这些局部变量会随着函数调用结束而被销毁。
var func = function() {
var i = 1;
alert(i); // 输出：1
};
alert(i); // 报错：i is not defind.
例外情况：闭包
var func = function() {
var i = 1;
return function() {
alert(i);
i++;
}
};
var f1 = func();
f1(); // 输出：1
f1(); // 输出：2
var f2 = func();
f2(); // 输出：1
f2(); // 输出：2
2、从闭包的一个经典应用谈起、从闭包的一个经典应用谈起
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = function() {
alert(i);
};
}
</script>
问题：无论单击哪个div，都会弹出5。
原因：onclick事件是异步触发的，当事件被触发时，for循环早已结束，此时变量i的值早已经是5。
解决：在闭包的帮助下，把每次循环的i值都封闭起来。当事件函数顺着作用域链从内到外查找变量i时，会先找到被封闭在闭
包环境的i，单击div时，会分别输出0,1,2,3,4。
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var divs = document.getElementsByTagName("div");
资源评论
