您的位置：首页 > Web前端 > JavaScript

JavaScript笔记4--闭包

2016-03-31 09:32 453 查看

1.啥是闭包？

闭包是一个函数，一个能够读取某函数内部变量的一个函数。

2.闭包有啥用途？

通过闭包可以读取某函数的内部变量，相当于扩大了变量的访问范围；

3.闭包举例

示例1

function add(num1,num2){
var innerAdd = function(){
alert(num1+num2);
}
return innerAdd;

}

//客户端：
$(function(){

var innerAdd = add(1,2);
setTimeout(innerAdd,5000);

var innerAdd = add(2,2);
setTimeout(innerAdd,5000);

});
</script>

innerAdd 是一个闭包，它延长了变量num1、num2的生命时间；

注意，此时的num1、num2是形参哈；

示例2

<script type="text/javascript">
$(function(){

/*************** 给每个span元素追加点击事件 ****************/

//test1
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
var clickFunction = function() {
alert(i);
};
spans[i].onclick = clickFunction;
}

//test2
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
function out(num){
var clickFunction = function() {
alert(num);
};
return clickFunction;
}
spans[i].onclick = out(i);
}

});
</script>
--------------------------------------
<body>
<div id="divTest" >
<span>0</span> <BR/>
<span>1</span> <BR/>
<span>2</span> <BR/>
<span>3</span> <BR/>
</div>
</body>

test1结果：

每次都是4。原因分析：

clickFunction 是一个闭包，它延长的是变量 i 的生命时间。注意，此时的 i 可不是形参哈。

当i的值为4的时候，判断条件不成立，for循环执行完毕。但是因为每个span的onclick方法这时候为内部函数，所以i被闭包引用，内存不能被销毁，i的值会一直保持4。直到程序改变i的值或者所有的onclick函数销毁（主动把函数赋为null或者页面卸载）时才会被回收。这样每次我们点击span的时候，onclick函数会查找i的值（作用域链是引用方式），一查等于4，然后就alert给我们了。

也就是说，当for循环执行完毕，此时的 i = 4；由于闭包延长了 i 的生命时间，所以在内存中，i =4 一直存在着。当点击事件触发时，会弹出4.

test2结果：

分别是1，2，3，4。原因分析：

clickFunction 是一个闭包，它延长的是变量 num 的生命时间，并不是变量 i 。

每次调用out函数，都会新创建一个新的out函数的作用域空间。所以闭包延长的是当前变量 num 的生命时间。注意，此时的 num 是形参，这个形参的值来自于 i 。

从本质上讲，如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被延迟使用。因此，当外部函数调用完成后，这些变量的内存不会被释放（最后的值会保存），闭包仍然需要使用它们。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航