Nested JavaScript functions

Question

I would like to make nested JavaScript functions as a prove of concept. I found an example and modified it a little to fit my prove of concent:

var t = {
    nestedOne: {
        nest: function() {
            alert('nest');
            this.nestedTwo.nest2();
        },
        nest3: function() {
            alert('nest3');
        },       
        nestedTwo: {
           nest2: function() {
              alert('nest2');
              t.nestedOne.nest3();
           }       
        }
    }
};

t.nestedOne.nest();

// *** Output is nest, nest2 and nest3 ***

This works, but I wonder why in nest2, I have to call by t.nestedOne.nest3, and not this.nestedOne.nest3, similar to how I call from nest2.

For the same reason that you can't use this.nestedOne.nestedTwo.nest2() inside your nest method. — Bergi
– Bergi, Commented Oct 2, 2014 at 12:07

Jamiec · Accepted Answer · 2014-10-02 12:28:32Z

2

Its all about the context of this

The easiest way to explain, is to make a slight change to your code:

var t = {
    nestedOne: {
        nest: function() {
            console.log('nest',this);
            this.nestedTwo.nest2();
        },
        nest3: function() {
            console.log('nest3',this);
        },       
        nestedTwo: {
           nest2: function() {
              console.log('nest2',this);
              t.nestedOne.nest3();
           }       
        }
    }
};

t.nestedOne.nest();

The output from the above is

nest Object { nestedTwo={...}, nest=function(), nest3=function()}
nest2 Object { nest2=function()}
nest3 Object { nestedTwo={...}, nest=function(), nest3=function()}

Note that in the second call, this refers to the function, no longer the object.

Now, you can make the following 2 changes

call next2 passing in the context of this: this.nestedTwo.nest2.call(this);
use this in nest2: this.nest3();

And all works as expected:

var t = {
    nestedOne: {
        nest: function() {
            console.log('nest',this);
            this.nestedTwo.nest2.call(this);
        },
        nest3: function() {
            console.log('nest3',this);
        },       
        nestedTwo: {
           nest2: function() {
              console.log('nest2',this);
              this.nest3();
           }       
        }
    }
};

t.nestedOne.nest();

edited Oct 2, 2014 at 12:28

answered Oct 2, 2014 at 12:09

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brinch Over a year ago

Hmmm, I don't see anything in the output window, when I click "Run code snippet".

Jamiec Over a year ago

Weird, I do - what browser are you on?

Quentin · Accepted Answer · 2014-10-02 12:06:51Z

0

The context of a function call is determined by the object on which the function is called, not the left-most object in the path used to get to it.

this:

this.nestedTwo.nest2();
     ^^^^^^^^^

not this:

this.nestedTwo.nest2();
^^^^

answered Oct 2, 2014 at 12:06

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Nested JavaScript functions

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related