<分区>
(这个问题与 this 和 this 有关，但那里的答案并没有帮助我弄清楚我的情况出了什么问题。)
我正在尝试创建一个可点击元素数组，其中每个元素都绑定(bind)到某个对象的单独实例。
我在这里尽可能地简化了我正在为这个问题处理的真实代码:
//----------
// Setup part
// SomeObject just holds a number
var SomeObject = function(number) {
this.number = number;
this.getNumber = function() {
return this.number;
};
};
// contains SomeObject(1) through SomeObject(9)
var someArrayContainingObjects = [];
for(var i=1; i<=9; i++)
{
someArrayContainingObjects.push(new SomeObject(i));
}
//----------
// Problem part
for(var y=0; y<3; y++)
{
for(var x=0; x<3; x++)
{
var obj = someArrayContainingObjects[y*3 + x]; // Creating new variable in the loop every time explicitly with var statement?
$("body").append(
$("<button />")
.text("Should output ("+obj.getNumber()+")")
.click(function() {
alert(obj.getNumber()); // Will always be 9
})
);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>我想通过在循环中显式使用 var obj = ... 我会创建一个新的上下文/范围/但是它会为每个匿名 click() 回调调用我正在创建的函数——这样当我点击其中一个对象时，相应 SomeObject 的适当数量是 alert()ed 而不是最后一个的数量SomeObject 循环从数组中获取。
有人可以向我解释为什么此代码片段无法按预期工作，以及需要更改哪些内容才能使代码正常运行吗？