一道有趣的javascript题目.

Question

有如下两段代码, 第一段代码执行后弹出3次对话框都显示2,
而第二段代码执行后弹出3次对话框分别显示0,1,2.
第二段代码在for循环里比第一段代码多了一层匿名函数自执行.
这时什么原因,谁能解释一下:

[code="java"]function test( num ) {
var funArray = new Array();
for (var i = 0; i < num; i++) {
var trueValue = i;
funArray.push( function() {
alert( trueValue );
});
}
return funArray;
}

var val = test( 3 );
for(var i = 0; i < val.length; i++) {
vali;
}[/code]

[code="java"]function test( num ) {
var funArray = new Array();
for (var i = 0; i < num; i++) {
(function() {
var trueValue = i;
funArray.push( function() {
alert( trueValue );
});
})();
}
return funArray;
}

var val = test( 3 );
for(var i = 0; i < val.length; i++) {
vali;
}[/code]

Answer 1

呵呵，这面试题没仔细想还真会被搞糊涂了，不过单步运行下就很清楚了。这道题的主要问题在于循环体中的trueValue。[code="js"]for (var i = 0; i < num; i++) {

var trueValue = i;

funArray.push( function() {

alert( trueValue );

});

}
/*这段代码中执行了3次var trueValue = i;因为都是在同一作用域里边，所以每次执行都会覆盖掉上次的结果，最后执行结果必然是var trueValue = 2; 弹出3次2也就不足为奇了*/[/code][code="js"]for (var i = 0; i < num; i++) {

(function() {

var trueValue = i;

funArray.push( function() {

alert( trueValue );

});

})();

}

/*
这段代码执行了3次匿名函数
function() {

var trueValue = i;

funArray.push( function() {

alert( trueValue );

});

}
也就是创建了3个不同的匿名function对象，这些function对象拥有各种的trueValue属性，也就是说3个trueValue变量有不同的作用域，所以每次alert出来的都是不同的trueValue。
*/ [/code]