Javascript 我的对象范围从一个require被外部修改,但我正在克隆它

Javascript 我的对象范围从一个require被外部修改,但我正在克隆它,javascript,requirejs,assign,mutated,Javascript,Requirejs,Assign,Mutated,我有一个javascript文件(我们称之为newconfig.js),它通过config.js文件中的require()操作包含一个模块(对象类型): 将core.js视为: module.exports = { configuration: { showLanguageSelector: false }, tableStructure: { columns: [ { tooltip: 'Indic

我有一个javascript文件(我们称之为newconfig.js),它通过config.js文件中的require()操作包含一个模块(对象类型):

将core.js视为:

module.exports = {
    configuration: {
        showLanguageSelector: false
    },
    tableStructure: {
        columns: [
        {
            tooltip: 'Indicates if this load has alerts or notes',
            name: 'Alerts <em>& Notes</em>'
        },
        {
            tooltip: 'Trailer number and trailer type',
            name: 'Trailer <em>Type</em>'
        },
        {
            tooltip: 'Door number',
            name: 'Door'
        },
        {
            tooltip: 'Trailer opened date/time',
            name: 'Open<span>ed</span>'
        },
        {
            tooltip: 'Trailer closed date/time',
            name: 'Closed'
        }
        ]
     }     
 };
然后在我的文件中克隆core的实例:

let config = Object.assign({}, core);
let config = Object.assign({}, core);
然后我改变我的本地对象

config.Configuration = {
    showLanguageSelector: true
};

config.tableStructure.columns = [
    {
        tooltip: 'Indicates if this load has alerts or notes',
        name: 'Alerts <em>& Notes</em>',
    }, {
        tooltip: 'Trailer number and trailer type',
        name: 'Trailer <em>Type</em>',
    }
];
当外部文件试图在本地包含要使用的./core/config文件时,其更改为newconfig.js

IE(mylayout.js):

输出时的核心值为:

    {
Configuration: {
            showLanguageSelector: false // interesting how this wasn't mutated!!!!!
        },
        tableStructure {
columns: [
            {
                tooltip: 'Indicates if this load has alerts or notes',
                name: 'Alerts <em>& Notes</em>',
            }, {
                tooltip: 'Trailer number and trailer type',
                name: 'Trailer <em>Type</em>',
            }
        ]
      }
}
{
配置:{
showLanguageSelector:false//有趣的是,这是如何没有变异的!!!!!
},
表结构{
栏目:[
{
工具提示:“指示此加载是否有警报或注释”,
名称:“警报和注释”,
}, {
工具提示:“拖车编号和拖车类型”,
名称:“拖车类型”,
}
]
}
}
如果我在更改之前将对象克隆到一个新对象并导出该新对象,那么导致我的原始核心配置发生变化的错误在哪里

在另一个js文件中要求my newconfig.js会返回所需的行为:

{
    Configuration: {
            showLanguageSelector: true
    },  
    tableStructure {
       columns: [
            {
                tooltip: 'Indicates if this load has alerts or notes',
                name: 'Alerts <em>& Notes</em>',
            }, {
                tooltip: 'Trailer number and trailer type',
                name: 'Trailer <em>Type</em>',
            }
        ]
      }
}
{
配置:{
showLanguageSelector:true
},  
表结构{
栏目:[
{
工具提示:“指示此加载是否有警报或注释”,
名称:“警报和注释”,
}, {
工具提示:“拖车编号和拖车类型”,
名称:“拖车类型”,
}
]
}
}
然后在我的文件中克隆core的实例:

let config = Object.assign({}, core);
let config = Object.assign({}, core);
那只是一个浅薄的克隆。因此克隆上的
配置
表结构
属性仍然引用原始属性:

const-original={
配置:{
傅:“酒吧”
}
};
const clone=Object.assign({},原始);

console.log(original.configuration==clone.configuration);//true
您可能只想克隆需要更改的部分,而不是深度克隆整个原始对象:

let config = Object.assign({}, core,{
  Configuration : {
    showLanguageSelector: true
  },
  tableStructure: Object.assign({},core.tableStructure,{
    columns = [
      {
          tooltip: 'Indicates if this load has alerts or notes',
          name: 'Alerts <em>& Notes</em>',
      }, {
          tooltip: 'Trailer number and trailer type',
          name: 'Trailer <em>Type</em>',
      }
    ]
  })
});
let config=Object.assign({},core{
配置:{
showLanguageSelector:true
},
tableStructure:Object.assign({},core.tableStructure{
列=[
{
工具提示:“指示此加载是否有警报或注释”,
名称:“警报和注释”,
}, {
工具提示:“拖车编号和拖车类型”,
名称:“拖车类型”,
}
]
})
});

Object.assign制作浅拷贝。您需要进行深度复制(递归到子对象和数组中)。。但这将解除绑定我在object@ChrisWest-传递文本通常不是最好的方法。请理解,但使用非jQuery深度克隆方法,如:JSON.parse(JSON.stringify(obj))。。将取消绑定对象中的函数。有没有一种方法可以在深度克隆过程中保持对象文本中的任何函数不变?@ChrisWest-请参阅链接问题,该问题提供了一些关于深度克隆函数的答案,包括非jQuery函数。这是一个复杂的话题,没有一刀切的解决方案。(注意:您没有保持对象文字的完整性;您保持了对象的完整性。对象文字是源代码概念;解析对象文字的结果是对象。)
let config = Object.assign({}, core,{
  Configuration : {
    showLanguageSelector: true
  },
  tableStructure: Object.assign({},core.tableStructure,{
    columns = [
      {
          tooltip: 'Indicates if this load has alerts or notes',
          name: 'Alerts <em>& Notes</em>',
      }, {
          tooltip: 'Trailer number and trailer type',
          name: 'Trailer <em>Type</em>',
      }
    ]
  })
});