0

我很难理解和使用闭包（是的，我已经阅读了JavaScript 闭包如何工作？）

我的问题如下：

for (row = 0; row < 10; row++) {
    for (column = 0; column < 10; column++) {

        var target = $("#" + Data.Row[row].Column[column].ID);

        target.mouseenter(function () {
            var position = CalculatePosition($(this));

            alert("row:" + row + ",column:" + column);

            ...
        });
    }
}

如您所料，只要目标鼠标悬停在行和列上，行和列始终为 9。那么我的问题是，如何冻结行和列的值，以便 mouseevent 匿名函数可以获得它们的预期值？我试着做类似的事情

target.mouseenter(function() {}.bind(column));

这似乎只适用于列，但当然this不再是指目标。

4

2 回答 2

5

这里最简单的选择通常是定义一个返回处理程序的函数：

function getHandler(row, column)
    return function () {
        var position = CalculatePosition($(this));
        alert("row:" + row + ",column:" + column);
        // ...
    };
}

然后在你的循环中调用这个函数，让你的处理程序在调用时将相关变量“固定”到它们的值：

for (row = 0; row < 10; row++) {
    for (column = 0; column < 10; column++) {
        var target = $("#" + Data.Row[row].Column[column].ID);
        target.mouseenter(getHandler(row, column));
    }
}

您也可以在循环中执行此操作，在立即执行的匿名函数中：

for (row = 0; row < 10; row++) {
    for (column = 0; column < 10; column++) {
        var target = $("#" + Data.Row[row].Column[column].ID);
        target.mouseenter((function(row, column) {
            return function () {
                var position = CalculatePosition($(this));

                alert("row:" + row + ",column:" + column);

                ...
            };
        })(row, column)));
    }
}

但是IMO更丑陋且难以阅读。

无论哪种情况，这里的基本方法是建立一个新的函数作用域，使用循环变量作为参数；现在，当您在处理程序回调中使用它们时，它们不再是对外部范围变量的引用。

于 2013-07-22T22:30:52.420 回答
0

您可以像这样使用绑定（第一个参数是上下文（thisarg））：

target.mouseenter(function(row, column){
    ...
}.bind(target[0], row, column));

但是 bind 不是跨浏览器，而且你已经在使用 jQuery，所以你应该使用代理：

target.mouseenter($.proxy(function(row, column){
    ...
}, target[0], row, column));
于 2013-07-22T22:33:41.237 回答