Javascript значения закрытия замораживании инкрементора

Question

У меня жесткое понимание времени и с помощью замыкания (да, я прочитал How do JavaScript closures work?)

Моя проблема заключается в следующем:

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 больше не обращаясь к цели.

Answer 1

Самый простой вариант здесь, как правило, определить функцию, которая возвращает обработчик:

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))); 
    } 
} 

Но ИМО это намного уродливее и труднее читать.

В любом случае основным подходом здесь является создание новой области функций с использованием переменных цикла в качестве аргументов; теперь, когда вы используете их в обратном вызове обработчика, они больше не ссылаются на переменные внешней области.

Answer 2

Вы можете использовать bind как так (первый аргумент является контекст (this Arg)):

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

Но привязка не является кросс-браузер, и вы уже используете JQuery, так что вы должны использовать proxy вместо :

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