javascript - 数组引用以某种方式转换为值

Question

我有一堆重复的 select2 元素，所以我创建了一些方法来帮助设置它们:

function setupDropDown(element, placeholderText, data) {
    $(element).select2({
        dropdownAutoWidth: true,
        placeholder: placeholderText,
        data: function () { return { results: data }; }
    });
}

所以我可能有这样一行代码:

 setupDropDown(MakeSelector, "Select a Make",  makes);

“makes”是一个全局范围的数组，我希望能够更新它:

 var makes      = [{ id: 0, text: "Dodge" }, { id: 1, text: "Chrysler" }];

我希望能够更改 makes 数组并使其立即显示在下拉列表中，但更改没有显示出来。但是，如果我直接引用全局变量而不是通过“数据”参数，它实际上工作正常。因此，更改后的工作函数可能如下所示:

function setupDropDown(element, placeholderText) {
    $(element).select2({
        dropdownAutoWidth: true,
        placeholder: placeholderText,
        data: function () { return { results: makes }; }
    });
}

这是怎么回事？ data 参数不应该只包含对 makes 的引用吗？这就像在某些时候按值传递或深度复制，而不是复制引用。

更新

好的，这个 fiddle 展示了这个概念的工作:http://jsfiddle.net/kinetiq/8o85h8s2/

现在看看这个 fiddle ，我在这里做同样的事情，除了数组是通过参数传入的:http://jsfiddle.net/kinetiq/gp2bav4v/1/

Answer 1

这是因为当你使用一个参数....最初都是data和 makes指的是同一个对象，但是当你说 makes = <new object> , 现在 data仍然引用旧引用，但 makes引用新对象...

一个简单的解决方案是使用另一个对象来保存数组引用并将新对象作为参数传递

var makes      = {src : [{ id: 0, text: "Dodge" }, { id: 1, text: "Chrysler" }]};

setupDrop('#selectMake', 'Select a Make', makes);

function setupDrop(element, placeholderText, contents) {
    $(element).select2({
        dropdownAutoWidth: true,
        placeholder: placeholderText,
        data: function () { return { results: contents.src }; }
    });
}  

$('#changeArray').click(function() {
    makes.src = [{ id: 0, text: "Buick" }, { id: 1, text: "Ford" }];
});

演示:Fiddle