Переменная переменная доступна из закрытия. Как я могу это исправить?
Я использую Typeahead по twitter. Я сталкиваюсь с этим предупреждением от Intellij. Это вызывает "window.location.href" для каждой ссылки как последний элемент в моем списке элементов.
Как я могу исправить свой код?
Ниже мой код:
AutoSuggest.prototype.config = function () {
var me = this;
var comp, options;
var gotoUrl = "/{0}/{1}";
var imgurl = '<img src="/icon/{0}.gif"/>';
var target;
for (var i = 0; i < me.targets.length; i++) {
target = me.targets[i];
if ($("#" + target.inputId).length != 0) {
options = {
source: function (query, process) { // where to get the data
process(me.results);
},
// set max results to display
items: 10,
matcher: function (item) { // how to make sure the result select is correct/matching
// we check the query against the ticker then the company name
comp = me.map[item];
var symbol = comp.s.toLowerCase();
return (this.query.trim().toLowerCase() == symbol.substring(0, 1) ||
comp.c.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1);
},
highlighter: function (item) { // how to show the data
comp = me.map[item];
if (typeof comp === 'undefined') {
return "<span>No Match Found.</span>";
}
if (comp.t == 0) {
imgurl = comp.v;
} else if (comp.t == -1) {
imgurl = me.format(imgurl, "empty");
} else {
imgurl = me.format(imgurl, comp.t);
}
return "\n<span id='compVenue'>" + imgurl + "</span>" +
"\n<span id='compSymbol'><b>" + comp.s + "</b></span>" +
"\n<span id='compName'>" + comp.c + "</span>";
},
sorter: function (items) { // sort our results
if (items.length == 0) {
items.push(Object());
}
return items;
},
// the problem starts here when i start using target inside the functions
updater: function (item) { // what to do when item is selected
comp = me.map[item];
if (typeof comp === 'undefined') {
return this.query;
}
window.location.href = me.format(gotoUrl, comp.s, target.destination);
return item;
}
};
$("#" + target.inputId).typeahead(options);
// lastly, set up the functions for the buttons
$("#" + target.buttonId).click(function () {
window.location.href = me.format(gotoUrl, $("#" + target.inputId).val(), target.destination);
});
}
}
};
С помощью @cdhowie help, еще код:
я обновлю обновление, а также href для click()
updater: (function (inner_target) { // what to do when item is selected
return function (item) {
comp = me.map[item];
if (typeof comp === 'undefined') {
return this.query;
}
window.location.href = me.format(gotoUrl, comp.s, inner_target.destination);
return item;
}}(target))};
Ответы
Ответ 1
Здесь вам нужно вложить две функции, создав новое замыкание, которое фиксирует значение переменной (вместо самой переменной) в момент создания замыкания. Вы можете сделать это, используя аргументы для внешней функции, вызванной немедленно. Замените это выражение:
function (item) { // what to do when item is selected
comp = me.map[item];
if (typeof comp === 'undefined') {
return this.query;
}
window.location.href = me.format(gotoUrl, comp.s, target.destination);
return item;
}
При этом:
(function (inner_target) {
return function (item) { // what to do when item is selected
comp = me.map[item];
if (typeof comp === 'undefined') {
return this.query;
}
window.location.href = me.format(gotoUrl, comp.s, inner_target.destination);
return item;
}
}(target))
Обратите внимание, что мы передаем target
во внешнюю функцию, которая становится аргументом inner_target
, эффективно захватывая значение target
в момент вызова внешней функции. Внешняя функция возвращает внутреннюю функцию, которая использует inner_target
вместо target
, а inner_target
не будет изменяться.
(Обратите внимание, что вы можете переименовать inner_target
в target
, и вы будете в порядке - будет использоваться ближайший target
, который будет параметром функции. Однако, имея две переменные с одинаковым именем в таких плотная область может быть очень запутанной, и поэтому я назвал их по-другому в моем примере, чтобы вы могли видеть, что происходит.)
Ответ 2
Мне понравился абзац Закрытие внутри цикла от Javascript Garden
Это объясняет три способа сделать это.
Неправильный способ использования замыкания внутри цикла
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
Решение 1 с анонимной упаковкой
for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
console.log(e);
}, 1000);
})(i);
}
Решение 2 - возврат функции из замыкания
for(var i = 0; i < 10; i++) {
setTimeout((function(e) {
return function() {
console.log(e);
}
})(i), 1000)
}
Решение 3, мой любимый, где, я думаю, я наконец понял bind
- yaay! связать FTW!
for(var i = 0; i < 10; i++) {
setTimeout(console.log.bind(console, i), 1000);
}
Я очень рекомендую Javascript Garden - он показал мне это и многие другие особенности Javascript (и сделал меня, как JS, еще больше).
p.s. если ваш мозг не растает, в этот день вам не хватило Javascript.
Ответ 3
В ecmascript 6 у нас есть новые возможности.
Оператор let объявляет локальную переменную области блока, необязательно инициализируя ее значением.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
Ответ 4
Поскольку единственная область видимости JavaScript - это область действия функции, вы можете просто переместить замыкание на внешнюю функцию вне области, в которой вы находитесь.