为什么是我的简单，纯JavaScript，浅克隆函数不工作，因为我的期望

Why is my simple, pure JavaScript, shallow clone function not working as I expect?

本文关键字：我的 工作 因为 期望 函数 JavaScript 简单 为什么 浅克隆      更新时间：2023-09-26

我需要一个JavaScript文字对象的克隆函数，它现在甚至不需要递归地克隆。该函数必须是纯JavaScript，不能使用库。我做了一些研究，作为这个问题的一些最简单的答案表明，在这种情况下，我所需要的是"for in"循环与hasOwnProperty检查。问题是，所谓的复制对象的行为就好像我在新对象中复制了对原始属性的引用一样。这不是我的目标。克隆函数的方式是源对象的任何更改都不会影响目标对象，反之亦然。下面是代码:

...
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

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

我猜你有多个component，其中一个是"saveFile" component。问题是，克隆并不是克隆对象/数组，而只是创建对它们的引用。所以当你更新一个component时，所有对这些相同对象有引用的component也会被更新。

下面是您可能需要添加的检测类型的示例。然而，这可能不是一个绝对完整的答案，可以捕获所有的情况。

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那么大)，并且为您提供了许多这类事情。

相关文章：