Pass that Interview 1: Mimic a Class in Javascript

February 10th, 2010 by Brian Leave a reply »

Javascript, unlike most object-oriented programming languages, does not have the concept of Classes. Instead, Javascript uses a model in which objects are created, cloned, and enhanced by creating copies of the objects (it's loosely based on the Prototype pattern). There is a lot of power in this Prototypal system and people like Douglas Crockford have shown how Prototypal inheritance can be implemented in Javascript. This type of work is really cool; unfortunately it's not generally well-known or well-understood and many developers wish to use Javascript to simulate the more familiar Classes & objects as seen in languages like Ruby and Java.

Due to this simulation being common practice, the following has become a fairly common interview question:

How do you create a class in Javascript?

The answer is a bit wonky; but pretty simple to follow:

function testClass(def) {
    this.property = def;
}

testClass.prototype = {    

    property: null,

    exposeProperty: function() {
        alert("property is: " + this.property);
    }

}

var obj = new testClass();
var obj2 = new testClass("some default value");

obj.exposeProperty();
obj2.exposeProperty();

Lines 1-3 accomplish two goals: first, they define the name of our class by naming a function (in this case, "testClass") and second, the body of the function acts as our constructor.  Now that we have a pseudo-class, we can give it properties and methods.

The following lines assign a custom object (everything between the outermost set of brackets { }) to the "prototype" property of the testClass pseudo-class. The prototype property exists on functions in javascript and while an exhaustive discussion would take way too long, the important thing to know is that the prototype property basically says, "when objects are created based on this function (or "class" as we're calling it), this is the 'stuff' they should have associated with them." It essentially let's us define the properties and methods that our class has.

In the last 4 lines, we instantiate 2 objects of the type "testClass" and show that the constructor was effective.

Extra Credit - What's Really Happening?

If you want to really impress the interviewer, be prepared to explain that these aren't really classes.  When we create a function using a function declaration as in lines 1-3, we create and define an object (there are no classes in javascript, objects can be created, defined, and destroyed on the fly). By assigning methods and properties to the object contained within the prototype property of the function object, we are telling javascript, "this prototype contains everything you need to know to create, update, and delete copies of this object. If you create any copies of this object, they need to know all this stuff too."

And so, when we "instantiate" an object from our "class," what we're really doing is creating a clone of the base object. Note also that the constructor itself is not copied to the new object though it is run when the new object is created.

Go Prepared!

Now, when the interviewer asks you to demonstrate how to create a class in javascript, you'll be armed to not only answer the question, but explain why it's not really a class but really an object cloning operation.  Good luck!

  

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Reddit
  • StumbleUpon
  • Technorati
  • Twitter
  • DZone
  • HackerNews
Advertisement
  • Brian Antonelli
    Very well put! :)
blog comments powered by Disqus