js函数闭包

来源：互联网发布：java 电商平台编辑：程序博客网时间：2024/04/30 03:09

今写js时遇到一问题，要用内函数引用外函数的变量，我知道用函数闭包能解决这个问题，但没写成，故参考了些博客，并复制了此文章，用作参考。

我遇问题，并解决实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五角星评级</title>
<style type="text/css">
#rating tr td{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
inittable();
};
   function inittable(){
       var table=document.getElementById("rating");
       var tr=table.getElementsByTagName("tr");
       for(var i=0;i<tr.length;i++){
           var td=tr[i].getElementsByTagName("td");
           for(var j=0;j<td.length;j++){
           /*当我为每个单元格绑定一个事件函数时，该函数需要调用上面的for语句j变量，所以用函数闭包完美的解决了这个问题*/
               (function(j,td){
               td[j].onclick=function(){
               for(var s=0;s<td.length;s++){
               td[s].innerHTML="☆";
               }
               for(var s=0;s<=j;s++){
               td[s].innerHTML="※";
               }
               }})(j,td)
           }
       }
   }
</script>
</head>
<body >
   <table id="rating">
   <tr>
       <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
   </tr>
   <tr>
       <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
   </tr>
   <tr>
       <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
   </tr>
   </table>
</body>
</html>
实现图片如下

下面是转载的原文：

没有弹出框

?
1
2
3
4
5
6
7
<script language="javascript"type="text/javascript">
functionstart(){
varnid=document.getElementsByTagName("li");
nid.onclick=function(){alert("4");}
}
window.onload=start;
</script>

这样才有弹出对话框

?
1
2
3
4
5
6
7
<script language="javascript"type="text/javascript">
functionstart(){
varnid=document.getElementsByTagName("li");
nid.onclick=(function(){alert("4");})()
}
window.onload=start;
</script>

运行后，不论点击哪一个li，都是alert提示“4”。

这就是一个需要注意的地方：

闭包允许内层函数引用父函数中的变量，但是该变量是最终值。闭包引用的变量i，是循环结束后的值

?
1
2
3
4
5
6
<script language="javascript"type="text/javascript">
varli=document.getElementsByTagName("li");
for(vari=0;i<li.length;i++){
li[i].onclick=function(){alert(i);}
}
</script>

用闭包来解决

注意顺序：先弹出“clicked” 再弹出“also clicked”

?
1
2
3
4
5
6
7
<script>
varfnClick1 =function(){ alert("clicked"); };
varfnClick2 =function(){ alert("also clicked"); };
varoDiv = document.getElementById("div");
oDiv.attachEvent("onclick",fnClick2);
oDiv.attachEvent("onclick",fnClick1);
</script>

先弹出“also clicked” 再弹出“clicked”

?
1
2
3
varoDiv = document.getElementById("div");
oDiv.attachEvent("onclick",fnClick1);
oDiv.attachEvent("onclick",fnClick2);

.onclick后面的是最先执行的
attachEvent进去的事件就DOM的解释是乱续的。
但实际测试时 IE是后绑定的先执行,FF是先绑定的先执行.

作者：曾祥展

出处：学无止境-博客园（http://www.cnblogs.com/zengxiangzhan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。