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.

• Jamiec: A lot of that is not nested functions, but nested objects.
• Bergi: For the same reason that you can't use this.nestedOne.nestedTwo.nest2() inside your nest method.

Answer 1

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();

• brinch: Hmmm, I don't see anything in the output window, when I click "Run code snippet".
• Jamiec: Weird, I do - what browser are you on?

Answer 2

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();
^^^^