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

этот вопрос уже есть ответ здесь:

  • JavaScript закрытие внутри петли – простой практический пример 39 ответы

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

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

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

113
closures javascript listener pass-by-reference pass-by-value

6 ответов

В современных браузерах, вы можете использовать let или const ключевые слова для создания переменной с областью блоков:

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

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

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

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

159

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

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

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

function.bind был представлен прототипом framework и был стандартизирован в пятом издании 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))
            );
        };
    };
}
35

закрытие:

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: Теперь они обычно называются жизнь

13

вы заканчиваете с закрытием. вот статья о закрытиях и как с ними работать. Ознакомьтесь с примером 5 на странице; это сценарий, с которым вы имеете дело.

EDIT: четыре года спустя эта ссылка мертва. Корень проблемы выше заключается в том, что for loop forms closures (в частности, на marker = results[i]). As marker переходит в addEventListener, вы видите побочный эффект закрытия: общая "среда" обновляется с каждой итерацией цикла, прежде чем он окончательно "сохранится" через закрытие после заключительной итерации. MDN объясняет это очень хорошо.

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

Я думаю, что мы можем определить временную переменную для хранения значения 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);
 }); 
}

Я еще не проверял.

-4