jQuery 的扩展是否在对象之间创建引用？

Question

我用射击来延长距离。延长后，为什么修改镜头会改变效果？

var shat = [{bang:true}, {bumm: false}, {bong: false}]
var shot = [{bang:false}, {bumm: false}, {bong: false}]

$.extend(shat, shot)

shot[0].bang = true

console.log("shat", shat) 
// prints
Object
bang: true // why is this true?
Object
bumm: false
Object
bong: false

我假设在 shot[0].bang = true 之后创建了一个引用或由于某种原因发生了扩展。问题是，我想在延伸后修改镜头，但当然不想对镜头产生任何影响。有什么想法为什么会发生这种情况以及我可以做些什么来避免这种情况吗？

请参阅 jSfiddle 测试用例： http://jsfiddle.net/yEnph/3/

Answer 1

默认情况下，$.extend 仅浅复制属性*。这不是很令人兴奋。

在本例中，扩展属性为“0”、“1”、“2”等，因此 shat[0] === shot[0] 为 true扩展后仅两者计算结果为相同对象时的情况。既然它们是同一个对象，那么……好吧，改变一个地方就会改变它各处。

为了使它们分开，请考虑“深层复制”（请参阅​​调用 jQuery.extend 的不同方法）。我提到的另一种方法是序列化对象，然后反序列化它，因为它也可以在其他上下文中使用，例如使用 JSON。

var shat = [{bang:true}, {bumm: false}, {bong: false}]
var shot = [{bang:false}, {bumm: false}, {bong: false}]
$.extend(true, shat, shot) // use "deep copy"
shat[0] === shot[0]        // false; different objects now so...
shot[0].bang = "boom"      // ...this will not affect the object named by shat[0]
shot[0].bang               // "boom"
shat[0].bang               // false

快乐编码。

---

*也就是说，对于源对象中的每个属性 p，它仅执行 target[p] = source[p] 操作。请记住，在 JavaScript 中，数组只是对象的一种特殊子类型，具有神奇的长度：索引 n 处的值由属性“n”命名。

Answer 2

从 jQuery 文档 http://api.jquery.com/jQuery.extend/ 中，它看起来 $.extend 只增加对象，而不增加数组。在示例中，您的 shat 变量从未更改过。

Answer 3

有趣的是，它确实有效，但不知道 extend 适用于数组。

原因是这两个数组都包含对同一对象的引用。这与警告“新”的原因相同：

http://jsfiddle.net/yEnph/4/

var a = { test: "one"};
var b = a;

a.test="new";

alert(b.test);

两个变量都引用同一个对象，因此编辑对象会更新它们都引用的对象。

Answer 4

如果获取了键，扩展只会覆盖属性：

var a = {
   hello: "kitty"
},

b = {
   hello: "world"
}

$.extend( a, b );

console.log( a );
//Object
//hello: "world"

因为数组只是具有数字属性名称的对象，所以您将用相同的原理替换它们，除了 "hello" 是 "0" ， 等等。

因为你有对象而不是基元，所以 shat 获取 shot 的对象，它们被重写，因此原始 shat 对象丢失。因此修改 shot 的对象将会修改 shat 的对象，因为它们是相同的对象。