Object Literal Notation Class

Just wrote one and having teething trouble...

[Dabrowski]

ok, I finally had time to have a play with OLN, and like it so far.

I just have a couple of things I can't quite get to work. Here's a quick example of what I've got:

var myClass = function() {

function myPrivateFunc( aThing) {
alert( aThing);
}

myPrivateFunc( somethingInThePublicBit);

return {

aString: "Hello World!",

myPublicFunction: function() {
alert( "Public!");
}

}
}();

ok, first thing, is there any way to call the private bit of code with something from the public bit?

Specifically, I want to include an addEvent function, and call it with the public init function, or is that impossible as the public init function doesn't exist until the thing has returned? Instead of returning the OLN, could I define it within myClass, reference it for the addEvent, and then return it? I'd like to have a go as I'm sure it will come in useful for other things at some point.

Secondly, how do I look up aString from within myPublicFunction? No matter how I try to address it, I can't seem to find it.

Last, I tried to prototype the function into an element like this....

var elem = document.getElementById( "myElement");
elem.prototype.myPublicFunction = myClass.myPublicFunction;

It didn't work. I get 'prototype' is undefined' or something like that. But I can do it like this:

var elem = document.getElementById( "myElement");
elem.myPublicFunction = myClass.myPublicFunction;

Without the prototype. Which works great, but not as efficient with the memory obviously, which was why I was trying to prototype it.

Anyone used this before, please tell me the error of my ways!

[Fotiman]

ok, first thing, is there any way to call the private bit of code with something from the public bit?

I'm not sure I understand exactly what you're trying to do, but here's a quick break down of what is happening.

var myClass = function(){}(); 

That is executing the anonymous function and assigning the return value to the myClass variable. It's similar to doing this:

function x() { 
  return "foo"; 
} 
var myClass = x(); 

In that example, myClass is storing the string returned by the function. But what do we want the anonymous function to return? An object.

var myClass = function() { 
  return {}; 
}(); 

It's returning an object! myClass gets the object returned by the anonymous function.

var myClass = function() { 
  return { 
    aString : "Hello World!", 
    myPublicFunction : function() { 
      alert("Public!"); 
    } 
  }; 
}(); 

myClass now gets an object that has an "aString" property and a "myPublicFunction" property (which happens to be holding a function). So we can access those via myClass.aString and myClass.myPublicFunction().

var myClass = function() { 
  function myPrivateFunc(aThing) { 
    alert(aThing); 
  } 
  return { 
    aString : "Hello World!", 
    myPublicFunction : function() { 
      alert("Public!"); 
    } 
  }; 
}(); 

Now we've added a private method. What makes this private? Well, it's not defined inside of the object that gets assigned to myClass, so we have no way of accessing it directly. However, when our anonymous function executes, the object that is returned has access to that private method because it was in the function scope. So, we could access that private function from within the object:

var myClass = function() { 
  function myPrivateFunc(aThing) { 
    alert(aThing); 
  } 
  return { 
    aString : "Hello World!", 
    myPublicFunction : function() { 
      myPrivateFunc("Public!"); 
    } 
  }; 
}(); 

When we call myClass.myPublicFunction, it will be able to execute the myPrivateFunc call because it was in scope. Also, within your myPublicFunction method, "this" refers to the object. So you could access your other public properties like this:

var myClass = function() { 
  function myPrivateFunc(aThing) { 
    alert(aThing); 
  } 
  return { 
    aString : "Hello World!", 
    myPublicFunction : function() { 
      myPrivateFunc(this.aString); 
    } 
  }; 
}(); 

Now, your private function doesn't have any way to access the public methods in your object because we're returning that object directly without storing it. You *could* do something like this:

var myClass = function() { 
  function myPrivateFunc(aThing) { 
    alert(aThing); 
  } 
  var o = { 
    aString: "Hello World!", 
    myPublicFunction : function() { 
      myPrivateFunc(this.aString); 
    } 
  }; 
  myPrivateFunc(o.aString); 
  return o; 
}(); 

But that doesn't look as nice. It should help to give you a clearer picture of what is happening though. Instead, you could give your object an init method that calls your private method:

var myClass = function() { 
  function myPrivateFunc(aThing) { 
    alert( aThing); 
  } 
  return { 
    init : function() { 
      myPrivateFunc(this.aString); 
    }, 
    aString : "Hello World!", 
    myPublicFunction : function() { 
      myPrivateFunc(this.aString); 
    } 
  }; 
}(); 
myClass.init(); 

You could also keep a reference to your object as a private variable:

var myClass = function() { 
  var that; 
  function myPrivateFunc(aThing) { 
    alert(aThing); 
    alert(that.aString); 
  } 
  return { 
    init : function() { 
      that = this; 
      myPrivateFunc(this.aString); 
    }, 
    aString: "Hello World!", 
    myPublicFunction : function() { 
      myPrivateFunc(this.aString); 
    } 
  }; 
}(); 
myClass.init(); 

Secondly, how do I look up aString from within myPublicFunction?

this.aString

Last, I tried to prototype the function into an element like this....

That issue isn't specific to Object Literal Notation. For example, this will fail as well:

var elem = document.getElementById( "myElement"); 
elem.prototype.myPublicFunction = function(){alert('hi');}; 

I'm guessing (and it's only a guess) that DOM objects don't have a prototype because they are not actually JavaScript objects. That is, the DOM is not JavaScript specific, so the objects that it defines probably aren't created the same way a JavaScript object would be. :-)

I know I didn't answer your first question directly, but hopefully this will give you better insight into OLN.

[mehh]

You can assign a prototype to DOM elements but it only works in certain browsers (FF and Opera if memory serves me) and you must do it through the Element keyword. For example:

Element.prototype={
 hello:function (){alert("hello")}
};

Then you then call the function from the DOM:

document.getElementById('id').hello();

[Fotiman]

@Dabrowski
Also, you should consider whether you really want to pollute the DOM namespace with your own methods. For example, lets say you add method "foo" to some DOM element. Then at some point in the future, some browser implements its own "foo" method for that DOM element. You've unintentionally created a conflict. Or you pick up some 3rd party library that does the same thing.

[Dabrowski]

ok, firstly, regarding the calling own public function thing, let me show you what I'm trying to do. I'd like to add an event to call my own init function, within the class. I'll use Foti's example as I think this the solution I need.

var myClass = function() { 
  function addEvent( myFunction) { 
   // Add event with myFunction 
  } 
  var publicFunctions = { 
   aString: "Hello World!", 
   myClassInit : function() { 
     // Do stuff here 
   } 
  }; 
  addEvent( publicFunctions.myClassInit); 
  return publicFunctions; 
}();

For now I have just made the addEvent function public and used

myClass.addEvent( ..., myClass.init);

which I suppose doesn't really make any difference. I'll need to be able to do this for my next project. I think. Maybe.

Incidentally, why do you need an extra () on the end?

As for polluting the DOM, that's the point for this particular script. I will reveal the final product when I have it working the way I want.

[Fotiman]

I'd like to add an event to call my own init function, within the class.

var myClass = function() { 
  function addEvent( myFunction) { 
  // Add event with myFunction 
  } 
  var publicFunctions = { 
  aString: "Hello World!", 
  myClassInit : function() { 
   // Do stuff here 
  } 
  }; 
  addEvent( publicFunctions.myClassInit); 
  return publicFunctions; 
}(); 

For now I have just made the addEvent function public and used myClass.addEvent( ..., myClass.init); which I suppose doesn't really make any difference. I'll need to be able to do this for my next project. I think. Maybe.

Incidentally, why do you need an extra () on the end?

You have an anonymous function. The () is telling it to execute.

For example, if you have something like this:

function myFunc() { 
  // ... 
} 

When you want to execute myFunc, you do this:

myFunc();

This is what you're doing with your anonymous function.

var x = function(){}();

Execute the function immediately, and the return value is what gets assigned to x. In your example, that would be the publicFunctions var in your function.