面试题之闭包

来源：互联网发布：知乎怎么查看问题编辑：程序博客网时间：2024/05/22 10:35

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

<!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);   }}

0 0