$ .extend () в функции .each (), странное поведение?

Question

Это конец моего плагина как обертки Highcharts API. Я использую extend() внутри each() функцию, чтобы установить свойство chart.renderTo для текущего объекта id атрибут.

Но это не работает. Вывод console.log($(this).attr('id')) правильный, но console.log(opt.chartOptions) показывает только последний идентификатор ( chart2 ) как свойство chart.renderTo.

Я что-то упускаю из $.extend() функции jQuery?

    var chartOptions = {}; // Plain option object

    return this.each(function() { // Each div

        console.log($(this).attr('id')); // Output: "chart1", "chart2"
        $.extend(opt.chartOptions, { chart : {renderTo : $(this).attr('id') } });
        console.log(opt.chartOptions); // Ops! chart.renderTo is always "chart2"

        $.ajax({
            url : opt.url,
            type : 'POST',
            data : opt.data,
            dataType : 'json',
            success : function(data) {
                $.extend(data, opt.chartOptions); // Merge data from server
                new Highcharts.Chart(data);
            }
        });

    });

Answer 1

Я предполагаю, что opt.chartOptions - это локальная переменная в вашей функции плагина.Если это так, то то, что вы здесь делаете, пытается расширить opt.chartOptions для каждого из div в контексте оболочки.

Каждый раз, когда вы выполняете итерацию по расширению (например, * 1006)*), jQuery расширяет foo со свойствами bar.Я уверен, что вы знаете об этом.

Что вы, вероятно, упускаете, так это то, что в вашем случае bar всегда является объектом формы { chart : {} }.Короче говоря, каждая итерация .each() перезаписывает предыдущий вызов $.extend().

В ходе первой итерации opts.chartOptions будет расширена на opts.chartOptions.chart, который вычисляется из первой divв вашем .each() контексте.

Во второй итерации вы будете пытаться снова расширить opts.chartOptions с помощью opts.chartOptions.chart, , который уже имеет .Но jQuery это не волнует, поэтому он присваивает вторые div вычисленные значения первым div в opts.chartOptions.chart.

И так далее, и так далее.

Несмотря на то, что вы используете его здесь, оно обычно не должно иметь значения, оно имеет значение здесь, потому что вы используете значение opts.chartOptions в функции обратного вызова вашего AJAX.Это создает замыкание на opts.chartOptions, что означает, что к моменту срабатывания обратного вызова вашего AJAX его значение может не соответствовать ожидаемому (поскольку оно могло быть изменено другой итерацией .each()бла-бла).

WHEW !!