闭包是JS较难分辨的一个概念,我只是按自己的理解写下来,如有不对还请指出。
函数闭包是指当一个函数被定义在另一个函数内部时,这个内部函数使用到的变量会被封闭起来形成一个闭包,这些变量会保持形成闭包时设定的值。当内部函数被从外面访问时,它会显示出当时形成闭包时封闭的值。下面举例说明:
例一:
<body onload="alert(caculate(1,2))"> </body> </html> <script type="text/javascript"> <!-- function caculate(op1,op2){ var num=6; function add(){ return op1+op2+num; } return add(); } //--> </script>
上面这段代码执行会显示9.
例二:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> </head> <body onload="init()"> <div>123</div> <div>abc</div> <div>456</div> <div>cde</div> <div>567</div> <div>efg</div> <div>789</div> <div>fgh</div> </body> </html> <script type="text/javascript"> <!-- function init(){ var divs=document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ var div=divs[i]; (function(div){ div.onclick=function(){ alert(this.innerHTML); }; })(div); } } //--> </script>
当每个div被点击时会显示其中的文字。
例三:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> </head> <body onload="init()"> <table border="1"> <tbody id="mytable"> <tr><td>1</td><td>abc</td><td>123</td><td>1000</td></tr> <tr><td>2</td><td>bcd</td><td>456</td><td>10000</td></tr> <tr><td>3</td><td>cde</td><td>567</td><td>10000</td></tr> <tr><td>4</td><td>def</td><td>789</td><td>10000</td></tr> </tbody> </table> </body> </html> <script type="text/javascript"> <!-- function init(){ var table=document.getElementById("mytable"); for(var i=0;i<table.rows.length;i++){ var tr=table.rows[i]; var tds=tr.getElementsByTagName("td"); for(var j=0;j<tds.length;j++){ var td=tds[j]; (function(td){ td.onclick=function(){alert(this.innerHTML)}; })(td); } } } //--> </script>
当表格里单元格被点击时会显示其中的文字。
2017年1月15日12:56:02