Does jQuery extend link building between objects?

Question

I expand the shat with a shot. After expansion, why does a shot modification change the shat?

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 

I assume that the link is created or the extension for some reason occurs after the shot [0] .bang = true. The problem is that I want to change the snapshot after continuing, but of course I don't want this to affect the shat. Any ideas why this is happening and what I can do to avoid this?

see jSfiddle testcase: http://jsfiddle.net/yEnph/3/

Answer 1

By default, $.extend just a shallow copy * property. This is not very interesting.

In this case, the extended properties are: "0", "1", "2", etc., and therefore shat[0] === shot[0] is true after the extension , which takes place only if the same object. Since they are one and the same object, then ... well, mutating it, one place mutates it everywhere.

To separate them, consider a “deep copy” (see the various ways to call jQuery.extend ). Another approach that I mention, since it can also be used in other contexts, is to serialize the object and then de-serialize it. with 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 

Happy coding.

---

* That is, for each p property in the source object (s), it simply executes target[p] = source[p] . Remember that in JavaScript, arrays are just a special subtype of an object with a magic length : the value at index n is called the "n" property.

Answer 2

From the jQuery document http://api.jquery.com/jQuery.extend/ , it looks like $ .extend, only Object increases, but not Array. In this example, your shat variable shat never changed.

Answer 3

Interestingly, this generally works, I did not know that extend worked on arrays.

The reason for this is that both arrays contain a reference to the same object. This is for the same reason that this will warn the “new”:

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

 var a = { test: "one"}; var b = a; a.test="new"; alert(b.test); 

Both variables have a reference to the same object, therefore editing the object updates the object to which they refer.

Answer 4

The extension simply overwrites the properties if the keys are taken:

 var a = { hello: "kitty" }, b = { hello: "world" } $.extend( a, b ); console.log( a ); //Object //hello: "world" 

Since arrays are just objects with names of numeric properties, you replace them with the same principle, except for "hello" is "0" , etc.

Since you have objects instead of primitives, shat gets shot objects, they are overwritten, so the original shat objects are lost. Therefore, modifying shot objects will change shat objects, since they are the same objects.