CODEWITHSUNDEEP
javascriptobject
do.
do.

Reputation: 617

weird behavior of nested object in javascript

i constructed a nested object below:

var outerMost = {

    inner1: {

    innerCall: alert( "i'm the call from inner1" ),

        inner2: {

        innerCall: alert( "i'm the call from inner2" ),

            inner3: {

            innerCall: alert( "i'm the call from inner3" ),

                inner4: {

                innerCall: alert( "i'm the call from inner4" ),

                    inner5: {

                    innerCall: alert( "i'm the call from inner5" ),

                    }
                }
            }
        }
    }
};

All i want is to hear the call form inner4 by using this:

outerMost.inner1.inner2.inner3.inner4.innerCall();

But i got calls form every inner alert and was threw an error message pointing to the last expression from the debugger:

Property 'innerCall' of object #<Object> is not a function

What's wrong with my outerMost?

Upvotes: 0

Views: 74

Answers (3)

nnnnnn
nnnnnn

Reputation: 150020

Note: I'm not going to keep repeating your entire object literal, I'll just use an abbreviated form...

Each time you said this:

{ innerCall: alert( "i'm the call from inner1" ) }

You weren't creating a property innerCall that was the alert() function, you were creating a property innerCall that was assigned the result of actually calling the alert() function at that moment. The return from alert() is undefined.

So nesting that structure five levels deep called alert() five times all in the process of creating your object, but the actual innerCall properties were all set to undefined. So then this:

outerMost.inner1.inner2.inner3.inner4.innerCall();

Was like saying undefined(); - which of course doesn't work.

What you need is for innerCall to reference a function which in turn calls alert():

{ innerCall : function() { alert("I'm the call from inner1"); } }

That is more or less equivalent to doing this:

function myInnerCallFunction1() {
   alert("I'm the call from inner1");
}

{ innerCall : myInnerCallFunction1 }

(Note that in the object literal myInnerCallFunction1 does not have parentheses so it is a reference to the function rather than executing the function.)

Upvotes: 1

Nenad
Nenad

Reputation: 3556

You have to do it this way:

var outerMost = {

inner1: {

    innerCall: function () {
        alert("i'm the call from inner1")
    },

    inner2: {

        innerCall: function () {
            alert("i'm the call from inner2")
        },

        inner3: {

            innerCall: function () {
                alert("i'm the call from inner3")
            },

            inner4: {

                innerCall: function () {
                    alert("i'm the call from inner4")
                },

                inner5: {

                    innerCall: function () {
                        alert("i'm the call from inner1")
                    },

                }
            }
        }
    }
}
};
outerMost.inner1.inner2.inner3.inner4.innerCall();

Upvotes: 0

Romain Meresse
Romain Meresse

Reputation: 3044

You forgot to specify that your innerCalls objects are functions... Correct code below

var outerMost = {

    inner1: {

    innerCall: function() {alert( "i'm the call from inner1" )},

        inner2: {

        innerCall: function() {alert( "i'm the call from inner2" )},

            inner3: {

            innerCall: function() {alert( "i'm the call from inner3" )},

                inner4: {

                innerCall: function() {alert( "i'm the call from inner4" )},

                    inner5: {

                    innerCall: function() {alert( "i'm the call from inner5" )},

                    }
                }
            }
        }
    }
};

Upvotes: 0

Related Questions