Змінна змінна доступна із закриття. Як я можу це виправити?

Я використовую 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, ще трохи коду: я оновлю оновлення, а також href для клацання ()

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

Тут потрібно вкласти дві функції, створивши нове закриття, яке фіксує значення змінної (замість самої змінної) на момент створення закриття . Ви можете зробити це, використовуючи аргументи зовнішньої функції, що викликається негайно. Замініть цей вираз:

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буде використано найближчий , що буде параметром функції. Однак наявність двох змінних з однаковим іменем у такому вузькому діапазоні може бути дуже заплутаним, і тому я назвав їх по-різному в моєму прикладі, щоб ви могли бачити, що відбувається.)

Мені сподобався абзац « Закриття всередині петель з 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- ага! зв’язати FTW!

for(var i = 0; i < 10; i++) {
    setTimeout(console.log.bind(console, i), 1000);
}

Я настійно рекомендую Javascript garden - він показав мені це та багато інших примх Javascript (і змусив мене подобатися JS ще більше).

ps, якщо твій мозок не розплавився, тобі цього дня не вистачило Javascript.

В ecmascript 6 ми маємо нові можливості.

Оператор let оголошує локальну змінну сфери дії блоку, необов'язково ініціалізуючи його значенням. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Оскільки єдиним обсягом, який має JavaScript, є область функцій , ви можете просто перенести закриття на зовнішню функцію, за межі області дії, в якій ви перебуваєте.

Просто щоб пояснити відповідь @BogdanRuzhitskiy (оскільки я не міг зрозуміти, як додати код у коментарі), ідея використання let дозволяє створити локальну змінну всередині блоку for:

for(var i = 0; i < 10; i++) {
    let captureI = i;
    setTimeout(function() {
       console.log(captureI);  
    }, 1000);
}

Це буде працювати практично в будь-якому сучасному браузері, крім IE11.