jquery - 无法将对象作为参数传递

Question

我花了一段疯狂的时间试图理解为什么我无法成功地将对象作为参数传递。当我这样做时，奇怪的事情就会发生。当我将对象作为文字传递时，它工作得很好。

我试图通过提供布局和数据集来构建表格，并将它们合并到一个对象中。它正在工作，只是它将行的所有数据设置为相同。我发现只有当我将模板作为参数传递时才会发生这种情况。

我想要的结果

First Row - First Col
First Row - Sec Col
Sec Row - First Col
Sec Row - Sec Col

我的实际结果

Sec Row - First Col
Sec Row - Sec Col
Sec Row - First Col
Sec Row - Sec Col

什么不起作用:

var data= {
    0 : {
        col1 : 'First Row - First Col'  ,
        col2 : 'First Row - Sec Col'
    },
    1 : {
        col1 : 'Sec Row - First Col',  
        col2 : 'Sec Row - Sec Col'      
    }
}
var template= {
    col1 : {
        attr : {id : '44'},
        css : {width : '150px'},
        html : ''
    },
    col2 : {
        attr : {id : 1},
        css : {width : '150px'},
        html : ''
    }
}

/**
 * Merge the template and the data
 * @param {Object} template - The table's template
 * @param {Object} data - The table's data
 * @returns {Object} tableData - The merged template and data
 */

Table.prototype.dataToTable = function(template, data){
    var tableData = {};
    var rowCount = Object.keys(data).length;
    for(i = 0; i < rowCount; i++){
        // Here is the issue. If I use = template
        // then both rows are somehow the same. But 
        // if I inject my layout object directly, it's fine!
        tableData[i] = template;
        $.each(tableData[i], function(k,v){
           v.html = data[i][k];
        });
    }
    return tableData;   
}

什么有效

Table.prototype.dataToTable = function(template, data){
    var tableData = {};
    var rowCount = Object.keys(data).length;
    for(i = 0; i < rowCount; i++){
        tableData[i] = {
            col1 : {
                attr : {id : '44'},
                css : {width : '150px'},
                html : ''
            },
            col2 : {
                attr : {id : 1},
                css : {width : '150px'},
                html : ''
            }
        };
        $.each(tableData[i], function(k,v){
           v.html = data[i][k];
        });
    }
    return tableData;   
}

http://jsfiddle.net/egea7gf7/9/

Answer 1

问题是因为 Javascript 中的对象仅通过引用传递，因此当您执行 oneObject = secondaryObject 时，oneObject 和 secondaryObject 引用将相同。当你改变一个时，你就会改变另一个。 您需要的是克隆模板对象。

var clone = function () {
    var cloneFn = function () {
        var newObj = (this instanceof Array ? [] : {});

        for (var index in this) {
            if (this.hasOwnProperty(index)) {
                if (index == 'clone')
                    continue;
                if (this[index] && typeof this[index] == 'object')
                    newObj[index] = cloneFn.apply(this[index]);
                else {
                    if (typeof (this[index]) == 'string')
                        newObj[index] = this[index];
                    else
                        newObj[index] = this[index];
                }
            }
        }
        return newObj;
    };
    return cloneFn.apply(this);
};

tableData[i] = clone.apply(template);

或者类似的东西 玩得开心，笑容满面