JavaScript - Invoking Methods that Reference this

Question

Not sure what I'm doing wrong here, I just want to be able to have functions of an object reference the object scope

myscipt.js

function MyFoo () {
   this.name = 'myname';
}

function MyBar () {
   this.myFoo = new MyFoo();

   function setMyFoosName( name ) {
      this.myFoo.name = name;
   }
}

somepage.html

<scipt>

$('document').ready( function() {
    $.myBar = new MyBar();
}

...
some action
...

$.myBar.setMyFoosName( 'new name' );

</script>

this throws an exception:

this.myFoo.name = name; this.myFoo is not defined

Answer 1

this referes to the scope of setMyFoosName. You should put this in a variable, and refer to that variable:

function MyFoo () {
   this.name = 'myname';
}

function MyBar () {
   var that = this;
   this.myFoo = new MyFoo();

   this.setMyFoosName = function( name ) {
      that.myFoo.name = name;
   }
}

Try to avoid exporting variables which should remain private:

function myFoo () {
   this.name = 'myname';
}

function MyBar () {
   /* myFoo is private */
   var myFoo = new MyFoo();
   this.setMyFoosName = function( name ) {
      myFoo.name = name;
   }
}

In this way, you cannot break your function with:

$.myBar = new MyBar();
$.myBar.myFoo = new EvilObject();
$.myBar.setMyFoosName();

Of course, this depends on your use, whether myFoo should be overridable or not.

Answer 2

Cant you do an instance static method with the JSON Data type?

    var MyFoo = {
        _instance : null,

        Instance : function(){
            if(this._instance == null)
            {
                this._instance = new this.Object();
            }
            return this._instance;
        },

        Object : function()
        {
            this.name = 'not robert';
        }
    }


    function MyBar (){    
       this.setMyFoosName = function ( name ) {
          MyFoo.Instance().name = name;
       }
    }

Bar = new MyBar()
Bar.setMyFoosName('Robert');

Gives it more of a global scope and so on, aslong as MyFoo is in the global scope.

Example here.

Answer 3

Lekensteyn and Ken got it half right each.

1. You have to put "this" in a variable, like Lekensteyn did, in order to be able to reference it inside of the nested function as well.
2. You have to make setMyFoosName accessible outside of the scope of MyBar, by assigning it to a property of "this", like Ken did.

This is how I would do it:

function MyFoo () {
   this.name = 'myname';
}

function MyBar () {
   var that = this;
   this.myFoo = new MyFoo();

   this.setMyFoosName = function( name ) {
      that.myFoo.name = name;
   }
}