面试题之闭包

最新推荐文章于 2024-04-27 08:37:26 发布

wuqiuyude

最新推荐文章于 2024-04-27 08:37:26 发布

阅读量687

点赞数

分类专栏： js 文章标签：闭包解决

本文链接：https://blog.csdn.net/wuqiuyude/article/details/44246879

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是闭包？以下代码点击会输出什么？为什么？能大概说明白的话继续问能想出几种解决办法。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
    p {background:gold;}
</style>
<script type="text/javascript"> 
function init() {    
    var pAry = document.getElementsByTagName("p");    
    for( var i=0; i<pAry.length; i++ ) {    
         pAry[i].onclick = function() {    
         alert(i);    
    } 
  }
}
</script> 
</head> 
<body onload="init();"> 
<p>产品 0</p> 
<p>产品 1</p> 
<p>产品 2</p> 
<p>产品 3</p> 
<p>产品 4</p> 
</body> 
</html>

什么是闭包的问题请参见博客揭开Javascript闭包的真实面目

点击每一个p都会弹出提示框，内容为5
这里写图片描述

解释：因为闭包会保存使其中的变量i一直存在内存中，for循环执行后i=5，所以所有的p都会弹出5；

修改方法一：

function init() {

    var pAry = document.getElementsByTagName("p");    
    for( var i=0; i<pAry.length; i++ ) {
        (function(n){
            pAry[i].onclick=function(){

                    alert(n);
            }
        })(i)

  }
}

修改方法二：

function init() {

    var pAry = document.getElementsByTagName("p");    
    for( var i=0; i<pAry.length; i++ ) {
        pAry[i].onclick=(function(n){     
        return  function(){        
                 alert(n);      
           }    
      })(i); 

  }
}

wuqiuyude

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题之闭包

什么是闭包？以下代码点击会输出什么？为什么？能大概说明白的话继续问能想出几种解决办法。<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>闭包演示</title><style type="text/css"> p {background:gold;}</style><script type="text/javasc
复制链接

扫一扫