变量用作函数参数后发生变化
Variable changes after being used as function parameter
我正在循环浏览一些元素,然后添加新的元素,这些元素应该在单击时操作这些元素。这很难解释,所以请看一下这个Fiddle,让它更清楚:
http://jsfiddle.net/pgFcn/3/
有趣的部分是这个代码(为了简洁起见,是伪代码):
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
someOtherElement.addEventListener("click", function () {
testDiv(div); // always refers to the last div because variable is overwritten next loop
});
}
我希望testDiv调用分别引用div 1、div 2和div 3,但它们都引用了div 3,因为变量在下一次循环迭代中会被覆盖。我该如何解决这个问题?
这是一个经典问题。以下是通常的解决方法:
for (var i = 0; i < divs.length; i++) {
(function(div){
someOtherElement.addEventListener("click", function () {
testDiv(div);
});
})(divs[i]);
}
为了理解问题和解决方案,您必须知道,在JavaScript中,非全局变量的作用域是对声明它的函数的调用。这意味着
- 在代码中,只有一个
div
变量 - 在解决方案中,调用中间函数会生成不同的
div
变量
这是解决问题的另一种方法。。。
function testDiv(d) {
// this doesn't work as expected, it always shows "Div 3"
alert(d.innerText);
}
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
var a = document.createElement("a");
a.index = i;
a.innerText = "[this should point to Div" + (i+1) + "]";
a.href = "#";
a.addEventListener("click", function (e) {
var e = e || window.event;
var tg = e.target || e.srcElement;
testDiv(divs[tg.index]);
});
document.body.appendChild(a);
}
相关文章:
- 函数参数中的数据与指定变量之间的任何性能差异
- 使用Express捕获参数
- 参数变量出现ngTable指令问题
- AngularJS:我可以跳过函数参数回调吗
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 要求未定义JS回调参数
- 我的jQuery插件参数没有正确启动,遇到了问题
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- 单击页面上的链接后高度发生变化
- jquery设置为使用参数运行
- 在变换的绝对位置发生变化时制作动画's参数
- AngularJS-在一个数组中使用多个不断变化的参数进行过滤
- 变量用作函数参数后发生变化
- 如何将变化参数传递给setTimeout
- 为什么JavaScript参数对象会因赋值给参数而发生变化?
- 对init和参数的API调用发生了变化
- Js,jquery,easyui,参数在传递给函数时发生了变化
- 为什么' this '在作为字符串或引用传递函数参数时发生变化
- 如何在mithril.js中检测模型参数变化事件
- 递归函数(插件?)与不断变化的参数,直到达到数(jQuery)