Javascript: OOP for the uninitiaded

Hello again!!
This post will be a continuation of a previous post: Javascript: you’re doing it wrong. (check it out if you haven’t yet!).
In here I’ll talk about two different approaches to Object Oriented Design in Javascript.

The way I see it, there are two main ways to tackle this subject: The closure approach (which I don’t really like, and I’ll explain why) and the prototype approach.

The Closure approach

Lets start with this one first, this is a pretty simple and elegant (at least to some extent) approach to OOP.
To understand this approach, you need to understand two things:

Creating objects in Javascript is simple

Yes, creating basic objects in Javascript is pretty simple, all you have to do, is either go with:

var myObj = new Object(); 

Or with an even simpler version:

var myObj = {};

You can even use this syntax to add properties:

var myObj = {first_name: "My", last_name: "Object"};

Or even methods!

var myObj = {
   first_name: "My", 
   last_name: "Object"
   say_hi: function() { alert("Hi there!"); }
};

Super easy, ain’t it? Creating objects this way is great, you’re defining it’s structure and instatiating it at the same time. That’s a good thing because it saves time and lines of code. It is not so good, because you a) loose the constructor (meaning the initialization is done outside the object’s code) and b) you can’t instantiate other objects using myObj as a class.

I’d go with this approach if you’re trying to achieve something similar to a singleton pattern, since you’re only instantiating the object once, and using it wherever you want.

But what was the other thing you had to understand?

Functions are objects too

The bad thing about the previous point was that you would loose the ability to have a constructor method for your Class/Object. Well, what if you had your object’s definition/instantiation inside a function and then you’d return that object from the function?
That’s right, you’d regain the ability to have a constructor…

Here is an example:

function myConstructor(fname, lname) {
  var myObj = {
     first_name: fname,
     last_name: lname,
     say_hi: function() { 
           alert("Hi! " + this.first_name + " " + this.last_name);
     }
   };
  return myObj;
}

var myObject = new myConstrucor("John", "Doe");
myObject.say_hi();

That code would alert “Hi! John Doe”, try it out!
That code seems pretty good, doesn’t it? You regain the constructor, and you can now use your object as a class! Here is where I don’t like this approach: everytime you’re doing “new myConstructor”, you’re instatiating a new anonymous function for the say_hi method. So everytime you create a new object, you’re also creating a new object for that function… now picture that for a real object with several methods inside…not good for memory consuption is it?

Enter the prototype approach

I won’t go over what a prototype is and how to use it in Javascript, you can read a bit about them in my other post or you can just google about them.

The basic idea behind this method, is that for your new object, you can actually reach it’s prototype (it’s ancestor) and add methods or properties, or even overwrite it altogether. By doing this, everytime you instantiate a new version of your object, it’ll have access it’s prototype methods and attributes as if they were his, and there is no double instantiation or anything!
Cool uh!? You’re saving memory and doing things the Javascript way.

Lets look at a little example:

var parentObject = {
   a: "This is attribute a",
   b: function() {
    alert("Hi there! This is b!");
   }
};

function myConstructor(c) {
   this.name = c;
}
myConstructor.prototype = parentObject; //This is where the magic happens
var myObj = new myConstructor("My name");

myObj.a; //This would return "This is attribute a"
myObj.b(); //This would alert "Hi there! This is b!"
myObj.name; //This would return "My name"

Simple and straightforward, right? No double instantiation or anything funny…
You’re defining the basic parent object, you’re then defining a constructor method (in which you could even access attributes from the parent object) and then you’re relating the parent and constructor through the prototype attribute (by rewriting the default prototype all objects have).

That is all folks!

I hope I was able to explain the basics of OOP in Javascript without too much problem, feel free to leave a comment if there are further questions!
Now go back to that IDE of yours and start coding!