《javascript语言精粹》闭包一个糟糕的例子解惑

发现《javascript语言精粹》里闭包例子的一个小问题

Posted on 2010年10月25日 by maisui99 | Leave a reply

如果你是第一次访问麦穗的博客，非常感谢你的到来如果你喜欢我的文章，就点击我订阅吧，RSS feed.

在道格拉斯的《javascript语言精粹》的39页有一个例子-目的是输出所点击节点的序号

糟糕的例子

<a>1</a>
<a>2</a>

var add_the_handles = function(nodes){
var i;
for(i=0;i<nodes.length;i+=1){
nodes[i].onclick = function(e){
alert(i);//输出2
}
}
};
var aEl = document.getElementsByTagName(“a”);
add_the_handles(aEl);

（为了测试方便，我自己加了节点和调用节点的方法，嘎嘎）

书里的解释

函数给时间处理器绑定了变量i，而不是函数在构造时的变量i（老道说的言简意赅，搞得我我想了好久都还是没想明白到底是为神马）

于是走出吹吹冷风，得瑟了一下之后，脑子清醒了许多，赶紧把解析流程写了下来

实际上代码执行的过程

var aEl = document.getElementsByTagName(“a”);
var i ;
for(i=0;i<aEl.length;i+=1){
}
aEl[0].onclick = function(){
alert(i);
};
aEl[1].onclick = function(){
alert(i);
};

这下看的比较清楚了吧

简单的可以描述为：事件绑定的时候，并没有传递i的参数进去，代码解析一遍之后i经过两次++，变成了2，因为事件激活是在解析之后，抛出的一直是全局变量i的值，所以就一直是2了

发现书里的一个小错误

老道在后面跟上了解决方法

var add_the_handles = function(nodes){
var i;
for(i=0;i<nodes.length;i+=1){
nodes[i].onclick = function(i){
return function(e){
alert(e)
};
}(i);
}
};
var aEl = document.getElementsByTagName(“a”);
add_the_handles(aEl);

测试一看，alert还是没有按照预期的弹出序号，反倒弹出一个[object mouseEvent]。

原因

我不知道为什么老道喜欢在绑定事件的形参里加上”e”，即使并没有派上用场。

注意黄色部分的代码，传进去的是i,输出来的是e，瞬间让我想起了形容劳模的“吃进去的是草，挤出来的是奶”

于是乎..果断地把e改成i,参数里的e也米有神马用处，就直接匿了

return function(){
alert(i)
};

最后

老爸老妈总是说好习惯要从小养成，像我这样的菜鸟，就要养成把xxx.length缓存起来的好习惯

所以最后，我们把代码总结一下

var add_the_handles = function(nodes){
var i,len = nodes.length;
for(i=0;i<len;i++){
nodes[i].onclick = function(i){
return function(){
alert(i)
};
}(i);
}
};
var aEl = document.getElementsByTagName(“a”);
add_the_handles(aEl);

然后，问题就搞定了。既然问题出现了，就附上

javascript中”e”的特殊用处

• 在IE浏览器里， event 就是等于window.event;
• 而在非IE浏览器中，event则是通过参数来传递，这里就是参数e

JavaScript中window.event对象,描述event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。

那么通常，我们会通过设置

event = e||window.event

然后进行操作event.keycode神马的操作

参考资料：

• 《javascript语言精粹》39页
• 详尽解析JavaScript中window.event对象

原文出自：http://www.f2es.com/discover-javscript-closure-mistake/

个人感觉有点像Java多线程中：

for(int i=0;i<3;i++){
 //创建三个线程，
new Thread(){
...
public void run(){
//这里面不能直接使用i，访问的外部量必须为final的
}
...
}.start();
}