CODEWITHSUNDEEP
javascriptoop
deltree
deltree

Reputation: 3824

Javascript Objects and Nesting

I clearly don't understand something about JS objects.

http://jsfiddle.net/q3SCF/2/

function baseObject () {
    var self = this;

    self.value = "value";
    self.nestedObject = function () {
        var nest = this;

        nest.value = self.value;
        nest.deepNest = function() {
            var deep = this;

            deep.value = nest.value;
            deep.selfValue = self.value;
        };
    };
    self.nestedObject2 = {
        value: self.value,
        deepNest: {
            value: this.value,
            selfValue: self.value
        }
    };
}

I'll break down the fiddle and try to make my question clear.

My understanding about JS objects is that, while passed by value, when one object is set equal to another, they both should point to the same value, so that when the original object is updated, then the object that was set equal to it would update.

See: Javascript pointer/reference craziness. Can someone explain this?

First, I'm not seeing that happen (and that is what I want to happen). But even stranger I'm seeing the values actually turn NULL when I change the base object if they're nested deeply enough. Help, please. I'm clearly missing something.

Just in case your JS engine does something different from mine, heres' what the results look like on my computer (Windows 7 run in Chrome).

All Deeply Nested Values turn to Null, and the Original value is the only value that changes

Upvotes: 3

Views: 202

Answers (2)

Bart
Bart

Reputation: 17361

My understanding about JS objects is that, while passed by value, when one object is set equal to another, they both should point to the same value, so that when the original object is updated, then the object that was set equal to it would update.

Javascript copies the reference by value. In your example all the variables hold a copied reference to the original self.value. When you assign a new value to self.value only that variable will hold the reference to that new value. All others will still point to the old reference.

The only way you can make your scenario work is to create an object for self.value and read a property. When this property is changed no reference to the original object is lost.

http://jsfiddle.net/q3SCF/13/

function baseObject () {
    var self = this;

    self.value = {p:"value"};
    self.nestedObject = function () {
        var nest = this;

        nest.value = self.value;
        nest.deepNest = function() {
            var deep = this;

            deep.value = nest.value;
            deep.selfValue = self.value;
        };
    };
    self.nestedObject2 = {
        value: self.value,
        deepNest: {
            value: this.value,
            selfValue: self.value
        }
    };
}

Upvotes: 1

Qtax
Qtax

Reputation: 33908

Your presentation code/markup is wrong.

You can simply use console.log(object) to see the objects structure at any time that you want. (The first level, when you expand the object you will see the structure at the time of expansion.)

For example:

Console

Upvotes: 2

Related Questions