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

js闭包初体验

2015-08-03 09:50 525 查看

对于js的闭包，一直以来只有书面上的了解，却从来没有在实战中使用，最近两天看了很多关于js的博客，了解了一些js闭包的作用，于是有了以下的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
var Ary = $("p");
for( var i=0; i<Ary.length; i++ ) {

Ary.eq(i).data("i",i);

}
for( var i=0; i<Ary.length; i++ ) {

// pAry[i].onclick = function() { 注释的是使用了jquery.data的方法来产生相同的效果，但是很明显闭包更加方便
// alert(i);
// Ary.eq(i).click(function(){
// // alert($(this).index());

// alert($(this).data("i"));
// });
// pAry[i].onclick=(function(i){
// return function(){alert(i);}
// })(i);
Ary.eq(i).click((function(i){
return function(){alert(i);}
})(i));
}
// }
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>

如果不用闭包，你每次点击不同的p段落，弹出的永远都是5.

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

标签： web前端 js

相关文章推荐

新的分享

章节导航