Question

I’m trying to learn JS from online tutorial – http://ejohn.org/apps/learn/#33 , you can test JS code there. I’m trying to understand nesting functions as methods inside of other functions and what “this” keyword is referencing then. Why if I put on above site code from below – it doesn’t work? Could someone explain that aspect of JS?

function Ninja(name){
  this.name = name;
  this.changeName = function(newname) {
    this.name = newname;
    this.anotherFunction = function(newname2) {
      this.name2 = newname2;
    }
  }
}

var ninja = new Ninja("John");
assert( ninja.name == "John", "The name has been set on initialization" );

// ninja.anotherFunction("Luken");
// ninja.changeName.anotherFunction("Luken");
// Why both above functions doesn't work?

assert(ninja.name2, "It works?");

ninja.changeName("Bob");
assert( ninja.name == "Bob", "The name was successfully changed." );

Answer 1

It’s fairly simple:

function Ninja(name)
{//this points to Ninja object inside constructor scope
    this.name = name;
    this.changeName = function(newname)
    {//method of Ninja, this points to context object, ie Ninja
        this.name = newname;//accesses the name property of Ninja
        this.anotherFunction = function(newname2)
        {//defines new method for this ==> Ninja object
            this.name2 = newname2;//context object is Ninja
        };
    };
}
var foo = new Ninja('foobar');
foo.name;//foobar
foo.changeName;//function, is defined in constructor
typeof foo.anotherFunction//undefined because it's assigned when the changeName method is called!
foo.changeName('Me');
foo.name;//Me
foo.anotherFunction('You');//works: changeName was called, and assigned anotherFunction to foo (instance of Ninja)
foo.name2;//You

What happened: simple, by invoking the changeName method, anotherFunction was defined and assigned to this. At that time this referenced the Ninja object, so the method was assigned to the instance of Ninja from which the changeName method was invoked. Prior to calling the changeName method, the anotherFunction method simply didn’t exist.

Though this might seem useless or stupid, it does make sense. What you need to remember is that functions/methods are, in essence stand-alone objects. In this code, they just happen to be defined as properties/methods, but they needn’t be used as such. Going back to the code above:

foo.name;//Me
bar = {};//some object
foo.changeName.apply(bar,['You']);
foo.name;//Me, nothing has changed, the changeName method was applied to the bar object
bar.name;//You, in the apply call, this pointed to bar, not foo
typeof bar.anotherFunction;//function
//You could even create the anotherFunction globally:
//  JUST TO SHOW YOU CAN, THIS IS DANGEROUS
//  ONLY USE THIS IF YOU KNOW WHAT THE POSSIBLE CONSEQUESES ARE!
foo.changeName.call();//in global scope
typeof antoherFunction;//function ==> this function is now globally available

The changeName method can be applied to any object, adding a new method, changeing/adding certain properties to that particular instance.