为什么我的简单、纯 JavaScript、浅层克隆函数没有按预期工作？

Question

我需要一个用于 JavaScript 文字对象的克隆函数，它现在甚至不需要递归克隆。该函数必须是纯 JavaScript，不能使用任何库。我做了一些研究，正如一些最简化的answers 到this 问题所暗示的那样，在这种情况下，我所需要的只是带有 hasOwnProperty 检查的“for in”循环。问题在于，所谓复制的对象表现得好像我已经复制了对新对象中原始属性的引用。那不是我的目标。克隆功能的方式是源对象的任何更改都不会影响目标对象，反之亦然。 代码如下：

...
function clone(from,to){
    for (var key in from){
        if(from.hasOwnProperty(key)){
            to[key]=from[key];
        }
    }
    return to;
}
...
var newComponent = clone(component,{});
var defaultComponentDrawParams = clone(component.drawParams,{});
if(params.type==="button"){
    console.info('new  component');
    component.drawParams.subType="chinga chunga";
    console.info(defaultComponentDrawParams.subType);
    console.info(newComponent.drawParams.subType);
}

控制台显示：

new  component
saveFile
chinga chunga

如果我理解正确，“新组件”之后的两个输出都应该是“未定义”，因为我的目标是在更改 component.drawParams 时不更改 newComponent.drawParams。 请告诉我我错过了什么。

Answer 1

我猜你有多个components，其中一个是“saveFile”component。问题是您的克隆没有克隆对象/数组，它只是创建对它们的引用。因此，当您更新一个component 时，所有引用这些相同对象的components 也会得到更新。

以下是您可能需要添加的检测类型的示例。但是，这可能不是涵盖所有情况的绝对完整答案。

function clone(from,to){
    for (var key in from){
        if(from.hasOwnProperty(key)){
            var val = from[key];

            if(typeof val === 'object') {
                to[key] = clone(from[key], {});
            } else {
                to[key] = from[key];
            }
        }
    }
    return to;
}

我对此建议犹豫不决，但另一种选择是使用 JavaScript 库，例如 Underscore.js：http://underscorejs.org/

它非常轻量级（5kb，几乎没有 jQuery 大），并且为您解决了很多此类问题。