JavaScript 变量作用域

JavaScript的变量作用域还是比较“诡异”的，上周给査欢做demo

 

function showDir(dirData) { var ulCell = newEl("ul","",""); for (var i = 0; i < dirData.length; i++) { var folderName = dirData[i].name; var liCell = newEl("li", "folder", folderName); ulCell.append(liCell); liCell.click(function() { //可以显示，但是不符合我的本意 //alert($(this).text()); alert(dirData[i].name); }); } $("#divDir").append(ulCell); }

 

出现i的索引值超出范围，alert(dirData[i-1].name)    JavaScript没有错误了，但是只能显示最后一个值，才开始怎么都不明白  :(

 

其实，这主要是因为i的作用的原因，变量 i 是在for循环里边的，所以，dirData[i] 就相应的取到i 的值，这种时候，使用 如 var j = i ; 这样的语句将 i赋值给另一个变量效果其实是相同的。

 

解决方法，for循环提取出来：

// 显示文件夹 function showDir(dirData) { var ulCell = newEl("ul","",""); for (var i = 0; i < dirData.length; i++) { ulCell.append(getFolderRow(dirData[i])); } $("#divDir").append(ulCell); } // 获取文件夹行 function getFolderRow(data) { var folderName = data.name; var liCell = newEl("li", "folder", folderName); liCell.click(function() { alert(data.name); }); return liCell; }

 

ok！ :)

 

下面的demo演示的一种延迟的做法：

function showDomDir(dirData) { var ulCell = newEl("ul", "", ""); for (var i = 0; i < dirData.length; i++) { var folderName = dirData[i].name; var liCell = newEl("li", "folder", folderName); ulCell.append(liCell); liCell[0].onclick = function() { alert(i); }; } $("#divDir").append(ulCell); }

 

原理参见msdn 的 onclick Event。

 

下面的demo能够比较清晰演示出JavaScript变量作用域：

 

$(document).ready(function() { for (var i = 0; i < 10; i++) { test1(i); } }); function test1(i) { i += 1; }