Прежде всего, поймите, что не так с этим кодом:
var funcs = [];
for (var i = 0; i < 3; i++) { // let's create 3 functions
funcs[i] = function() { // and store them in funcs
console.log("My value: " + i); // each should log its value.
};
}
for (var j = 0; j < 3; j++) {
funcs[j](); // and now let's run each one to see
}
Здесь, когда инициализируется массив funcs[]
, i
увеличивается, массив funcs
инициализируется и размер массива func
равен 3, поэтому i = 3,
. Теперь, когда вызывается funcs[j]()
, он снова использует переменную i
, которая уже была увеличена до 3.
Теперь, чтобы решить эту проблему, у нас есть много вариантов. Ниже приведены два из них:
i
с помощью let
или инициализировать новую переменную index
с помощью let
и сделать ее равной i
. Поэтому, когда вызов выполняется, index
будет использоваться, и его область действия закончится после инициализации. И для вызова снова будет инициализирован index
: var funcs = [];
for (var i = 0; i < 3; i++) {
let index = i;
funcs[i] = function() {
console.log("My value: " + index);
};
}
for (var j = 0; j < 3; j++) {
funcs[j]();
}
tempFunc
, который возвращает действительную функцию: var funcs = [];
function tempFunc(i){
return function(){
console.log("My value: " + i);
};
}
for (var i = 0; i < 3; i++) {
funcs[i] = tempFunc(i);
}
for (var j = 0; j < 3; j++) {
funcs[j]();
}
Самая важная причина не использовать их в том, что ES6 не поддерживается во всех средах.
Конечно, это может не повлиять на вас вообще, но все же: YAGNI . Не используйте шаблонные литералы, если вам не нужна интерполяция, многострочные литералы или неограниченные кавычки и апострофы. Большая часть аргументов из . Когда использовать двойные или одинарные кавычки в JavaScript? , переносятся также. Как всегда, сохраните свою базу кода согласованной и используйте только один строковый литерал, в котором вам не нужен специальный.