javascript整理、分析、提高、备忘(一)...
时间：2010-08-07 来源：tantan199
1、闭包
官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
2、作用域（scope）
In computer programming, scope is an enclosing context where values and expressions are associated. 中文即是所谓的 作用域, 它指明的是一个数值或者表达式所关联的上下文(能够被引用的执行空间).
3、实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns="http://www.w3.org/1999/xhtml" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>JAVASCRIPT</title> </head> <body> <noscript>请先运行执行JavaScript</noscript> <ul id="amy"> <li>应该弹出0</li> <li>应该弹出1</li> <li>应该弹出2</li> </ul> </body> </html> <mce:script type="text/javascript"><!-- var amy_li = document.getElementById("amy").getElementsByTagName("li"); var i=0,len=amy_li.length; while(i<len) { amy_li[i].onclick=function() { alert(i); }; i++; } // --></mce:script>
现在问题就出现每次点击amy（正在听amy winehouse的歌）的时候，并没有按照我们期望的那样弹出对应的数字，而都是弹出的3。
分析：作用域链，作用域链式在定义的时候就确定了的，i的作用域直接就是window，所以每次点击都相当于alert(window.i)
解决办法：
(1)、简洁的方法直接见i赋值给对象
while(i<len)
{
amy_li[i].name=i;
amy_li[i].onclick=function()
{
alert(this.name);
};
i++;
}
其中amy_li[i].name=i可以换成任意属性，如amy_li[i].truei=i。
顺便说下this，看下面类似的情况
<input type="button" value="0" id="amy0" />
<input type="button" value="1" id="amy1" />
<input type="button" value="2" id="amy2" onclick="whoiam();"/>
<mce:script type="text/javascript"><!--
function whoiam()
{
var who = (this === window) ? 'window' : this.id;
alert( who );
}
document.getElementById('amy0').onclick = whoiam;
document.getElementById('amy1').onclick = function()
{
whoiam();
};
// --></mce:script>
(2)、利用闭包
有很多写法，多列些出来
写法1、
while(i<len)
{
amy_li[i].onclick=new function()
{
var ii=i;
return function()
{
alert(ii);
}
};
i++;
}
写法2、
while(i<len) { amy_li[i].onclick=function() { var ii=i; return (function() { alert(ii); })() }; i++; }写法3、 while(i<len) { amy_li[i].onclick=function() { var ii=i; return function() { alert(ii); } }(); i++; }
写法4、 while(i<len) { amy_li[i].onclick=function(j) { return function() { alert(j); } }(i++); }
第一篇技术博文就到这里草草结束，以后计划通过实际事例和大家分享
相关阅读 更多 +
