js闭包初体验

最新推荐文章于 2023-06-28 17:15:00 发布

huihui10086

最新推荐文章于 2023-06-28 17:15:00 发布

阅读量606

点赞数

CC 4.0 BY-SA版权

分类专栏： js web前端文章标签： web前端 js

本文链接：https://blog.youkuaiyun.com/u012763269/article/details/47251889

web前端同时被 2 个专栏收录

58 篇文章

订阅专栏

36 篇文章

订阅专栏

本文详细解析JavaScript闭包的概念及其作用，并通过实际代码演示如何利用闭包提高代码复用性和效率，避免全局变量污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于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.