javascript - jQuery: object[property].push() 修改旧对象，如果新对象是用 jQuery.extend() 创建的

Question

考虑这个示例代码:

a={};
a['herp']=['derp'];

var b = jQuery.extend({}, a);
b['herp'].push('foo');
alert(a['herp']); //this produces message box with "derp,foo"

据我了解，var b = jQuery.extend({}, a); 克隆一个对象(如 John Resig 的 mentioned)，即创建一个具有相同属性的新对象作为前一个。如果这是正确的，那么为什么 b['herp'].push('foo'); 修改 a，如 alert(a['疱疹']);?

jsFiddle 示例:http://jsfiddle.net/M48tr/

Answer 1

我认为你应该这样做:

var b = jQuery.extend(true, {}, a);

在这里 fiddle http://jsfiddle.net/M48tr/1/

这是因为该属性是一个数组，您需要深度克隆。正如文档中所写:

The merge performed by $.extend() is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second object.The values are not merged.However, by passing true for the first function argument, objects will be recursively merged.

如果你不进行深度复制，b['herp'] 只包含对 a['herp'] 中的数组的引用>/p>

如果属性不是本例中的数组或对象，情况就不同了:

a={};
a['herp']='derp';

var b = jQuery.extend({}, a);
b['herp'] = 'foo';
alert(a['herp']);//alerts derp

alert(b['herp']);//alerts foo

在这里摆弄http://jsfiddle.net/M48tr/2