Как передать значение (а не ссылку) переменной JS в функцию?

Question

Вот упрощенная версия о чем-то, что я пытаюсь запустить:

for (var i = 0; i < results.length; i++) { 
    marker = results[i]; 
    google.maps.event.addListener(marker, 'click', function() { 
     change_selection(i); 
    }); 
} 

, но я нахожу, что каждый слушатель использует значение results.length (значение, когда цикл завершается). Как добавить слушателей таким образом, чтобы каждый из них использовал значение i в момент его добавления, а не ссылку на i?

Answer 1

Вам нужно создать отдельную сферу, которая сохраняет переменную в его текущем состоянии, передав его в качестве параметра функции:

for (var i = 0; i < results.length; i++) { 
    (function (i) { 
    marker = results[i]; 
    google.maps.event.addListener(marker, 'click', function() { 
     change_selection(i); 
    }); 
    })(i); 
} 

Путем создания анонимной функции и вызов ее с переменной в качестве первого аргумента, вы передаете значение функции и создаете закрытие.

Answer 2

Вы завершаете закрытие. Here's an article on closures и как с ними работать. Проверьте пример 5 на странице; это сценарий, с которым вы имеете дело.

EDIT: Четыре года спустя эта связь мертва. Корень вышеупомянутой проблемы заключается в том, что петли for образуют замыкания (в частности, на marker = results[i]). По мере того, как передается в addEventListener, вы видите побочный эффект закрытия: общая «среда» обновляется с каждой итерацией цикла до того, как она окончательно «сохраняется» через закрытие после последней итерации. MDN explains this very well.

Answer 3

укупорочные:

for (var i = 0, l= results.length; i < l; i++) { 
    marker = results[i]; 
    (function(index){ 
     google.maps.event.addListener(marker, 'click', function() { 
      change_selection(index); 
     }); 
    })(i); 
} 

EDIT, 2013: Они теперь обычно называют как IIFE

Answer 4

А также закрытия, вы можете использовать function.bind:

google.maps.event.addListener(marker, 'click', change_selection.bind(null, i)); 

передает значение i i n как аргумент функции при вызове. (null для связывания this, что вам не нужно в этом случае.)

function.bind была введена в рамках прототипа и был стандартизован в ECMAScript Пятое издание. До тех пор пока браузеры вообще не поддерживают его изначально, вы можете добавить свои собственные function.bind поддержки с помощью затворов:

if (!('bind' in Function.prototype)) { 
    Function.prototype.bind= function(owner) { 
     var that= this; 
     var args= Array.prototype.slice.call(arguments, 1); 
     return function() { 
      return that.apply(owner, 
       args.length===0? arguments : arguments.length===0? args : 
       args.concat(Array.prototype.slice.call(arguments, 0)) 
      ); 
     }; 
    }; 
} 

Answer 5

Я думаю, что мы можем определить временную переменную для хранения значения I.

for (var i = 0; i < results.length; i++) { 
var marker = results[i]; 
var j = i; 
google.maps.event.addListener(marker, 'click', function() { 
    change_selection(j); 
}); 
} 

Я еще не протестировал его.

Answer 6

for (var i = 0; i < results.length; i++) { 
    marker = results[i]; 
    google.maps.event.addListener(marker, 'click', (function(i) { 
     return function(){ 
      change_selection(i); 
     } 
    })(i)); 
}