更新数组的所有元素而不是仅更新一个元素

Question

这是我的问题的在线示例:http://jsfiddle.net/xwsuee2j/1/

我在页面上显示多个数据网格.这些数据网格是使用JavaScript对象生成的.这些对象之间的唯一区别是一个字段,所以这就是我为节省大量空间/代码所做的工作.

设置数组对象:

var dxDataGrids = [];

创建标准对象:

var BM_DataGrid = {
    showColumnLines: true,
    showRowLines: true,
    filterRow: {
        visible: true
    },
    searchPanel: {
        visible: true,
        width: 240,
        placeholder: 'Filter Search'
    },
    height: 'calc(100% - 54px)',
    columnAutoWidth: true,
    scrolling: {
        mode: 'standard',
        preloadEnabled: true
    },
    allowColumnResizing: true
};

一些虚拟数据源:

var dataSource1 = [{
    RouteName: 'LE01',
    EmployeeRef: 'DRIVER1',
    VehicleRef: 'VEHICLE1',
    Difference: 0
}, {
    RouteName: 'LE02',
    EmployeeRef: 'DRIVER2',
    VehicleRef: 'VEHICLE2',
    Difference: 0
}, {
    RouteName: 'LE03',
    EmployeeRef: 'DRIVER3',
    VehicleRef: 'VEHICLE3',
    Difference: 0
}];
var dataSource2 = [{
    RouteName: 'LE04',
    EmployeeRef: 'DRIVER4',
    VehicleRef: 'VEHICLE4',
    Difference: 0
}, {
    RouteName: 'LE05',
    EmployeeRef: 'DRIVER5',
    VehicleRef: 'VEHICLE5',
    Difference: 0
}, {
    RouteName: 'LE06',
    EmployeeRef: 'DRIVER6',
    VehicleRef: 'VEHICLE6',
    Difference: 0
}];

那个吐出我数据的位:

dxDataGrids['Grid1'] = BM_DataGrid;
dxDataGrids['Grid2'] = BM_DataGrid;
dxDataGrids['Grid1'].dataSource = dataSource1; // Set DataSource 1
console.log(dxDataGrids['Grid1'].dataSource); // Write out field for 'Grid1' (CORRECT)
dxDataGrids['Grid2'].dataSource = dataSource2; // Set DataSource 2
console.log(dxDataGrids['Grid2'].dataSource); // Write out field for 'Grid2' (CORRECT)
console.log(dxDataGrids['Grid1'].dataSource); // Write out field for 'Grid1' (INCORRECT)

基本上我想知道为什么更新其中一个对象数组,它会更新所有对象数组？

Answer 1

你有

dxDataGrids['Grid1'] = BM_DataGrid;
dxDataGrids['Grid2'] = BM_DataGrid;

所以基本上你的数组元素都指向同一个对象.

然后设置

dxDataGrids['Grid1'].dataSource = dataSource1;

你设置datasource的上BM_DataGrid对象,这亦是相同datasource的属性

dxDataGrids['Grid2'].dataSource = dataSource2;

既然两个数组元素都是同一个对象,还记得吗？因此,"最后" dataSource任务"获胜",这正是你所看到的.

说得通？

干杯,