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 = secondObject时，oneObject和secondObject引用将是相同的。当你改变一个你改变另一个。您需要的是克隆模板对象。

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

或类似的东西玩得开心，笑容很多

无法传递Object作为参数

1 个答案: