如何在循环内更新对象属性？

Question

I have found a behavior I did not expect when trying to use a loop in order to change the value set for a property in an object.

Basically, I declare my object outside the loop. Then I loop on an array of numeric values, which values are used to update the object property. Inside the loop, I store the current object state inside an external array.

The result is that instead of having an array containing a series of objects with different numeric values, I end up having the same numeric values in each object stored.

Here is the fiddle http://jsfiddle.net/fAypL/1/

jQuery(function(){

    var object_container = [];

    var numeric_values = [1, 2 , 3, 4];

    var my_object = {};


    jQuery.each(numeric_values, function(index, value){
        my_object['value'] = value;
        object_container.push(my_object);
    });

    jQuery.each(object_container, function(index, value){
        jQuery('#content').prepend(value['value']);
    });

});

I would expect to get 1 2 3 4 as values stored in each object, however, what I get is 4 4 4 4, which does not make sense to me.

Any hint on this behavior is more than welcome, thanks

Answer 1

When your code calls .push() and passes my_object , what's being passed is a reference to the object. No copy is made.

Thus, you've pushed four references to the exact same object into the array.

JavaScript objects always participate in expressions in the form of references. There's no other way to deal with objects. Thus when you create a variable, and set its value to be an object, you're really setting its value to be a reference to the object. Same with parameter passing, and anywhere else an object can appear in an expression.

In this case, you can create new objects pretty easily; just dispense with my_object and push a fresh one on each iteration:

    object_container.push( { value: value } );

Answer 2

You are not creating a new object each time around the loop - you are just updating the same existing object and pushing references of that to the object array. To create a new object you want to do something like:

my_object = { 'value': value };
object_container.push(my_object);

In this case you now will get something more like what you were looking for. See the updated fiddle here: http://jsfiddle.net/fAypL/2/ .

Best of luck!

One more thought (Clone!) - If you are really tied to using the same object each time, just clone the object before you add to the array. There is a great solution for that here .

Answer 3

You are using jQuery so if what you want is to merge without effecting the original look at :

var both_obj = $.extend( {}, default_obj , adding_obj );

This will leave your original object changed, also good to use for a copy .

jquery docs - extend()

Answer 4

An alternate version is to use an object with a constructor and the new keyword:

var object_container = [];  
var numeric_values = [1, 2 , 3, 4]; 

function MyObject(value)
{
    this.value = value;
}


jQuery.each(numeric_values, function(index, value){     
    object_container.push(new MyObject(value));
});

jQuery.each(object_container, function(index, value){
    jQuery('#content').prepend(value['value']);
});

Fiddle