These days, if you search around the web even a little, you will eventually come across many examples, tutorials, code snippets, libraries and more on JavaScript (i.e EMCAScript). Unfortunately it being a very flexible and easy to learn language, a good bunch of it is is not an ideal example of good practices. Then again a lot of the examples are very helpful too. Best bet, go to the library, bookstore, amazon or any other veritably knowledgeable source, and do some reading. Don’t forget to get your hands a little dirty by writing some code too!

For those of you that have been trained/educated in using classical object oriented languages, JavaScript will feel a little foreign. And, if you’re like we were when we first started using JavaScript as our platform, you’ll want to apply your OO knowledge to JS… please don’t, you’ll just hurt yourself :-)

In this article we’re going to present our favourite way of creating objects and doing inheritance. Keep in mind, this peg will not fit into just any size hole. Take the time to learn JS and then apply the patterns that match your needs best. We recommend this book to get started:

JavaScript: The Good Parts (very short book, and a must read)

Creating Objects

One way of creating class based objects is the modular pattern. Which, in my opinion is great for creating and managing clean, pluggable and extensible JavaScript applications.

For example, you can apply this for writing both singleton or instantiative objects.

Singleton Objects

var nameSpace = {};

// auto invoke to create a single instance
nameSpace.SomeClass = (function (){

    var _privateProperty = "foo";

    function _privateMethod() {}

    // return public properties and methods
    return {

        publicProperty: "bar",

        publicMethod: function publicMethod() { }

    };

}());

Notice the last set or () on the last line. This causes the function to be auto invoked. Returning the object literal that contains our public properties and methods and protecting our private properties and methods through closure. Keep an eye out for an article on closure, coming soon to this blog.

Instantiative Objects

Remove the auto-invoke on the last line and you get:

var nameSpace = {};

// class constructor
nameSpace.SomeClass = function (arg1, arg1) {

    var _privateProperty = "foo";

    function _privateMethod() {}

    // return public methods
    return {

        publicProperty: "bar",

        publicMethod: function  publicMethod() { }

    };

};

var obj = new nameSpace.SomeClass("arg1", "arg2");

You can even do some good old inheritance.

var nameSpace = {};

// parent class
nameSpace.SomeOtherClass = function (arg1, arg2) {

        var _privateProperty;

        // publilc properties. can be dynamically loaded as shown below.
        this.foo = "bar";

};

// child class
nameSpace.SomeClass = function (arg1, arg2) {

        // private and public properties
        var _privateProperty,
            _publicAPI = {
                foo: "bar2",
                getFoo: function getFoo() {
                    // foo => "bar2"
                    return this.foo;
                }
        };

        // loads public methods
        function ClassConstructor(){

            // load in public properties
            for (var property in _publicAPI) {
                if(Object.prototype.hasOwnProperty.call(_publicAPI, property)) {
                    this[property] = _publicAPI[property];
                }
            }

        }

        // inherit from parent class
        ClassConstructor.prototype = new nameSpace.SomeOtherClass(arg1, arg2);

        // return new instance
        return new ClassConstructor();

};

// the "new" operator is not required but has no ill effects when used
var obj = nameSpace.SomeClass("arg1", "arg2");

The Good And The Bad

One caveat is private properties and methods can not be shared between other objects. There is still a lot of flexibility in this and extending objects is straighforward and expressive.  For example there are lots of great libraries such as Prototype, MooTools, YUI and more that support out of box class modelling in more expressive terms. Even if you want to code in some other familiar idioms, for example Ruby, there are lots of useful frameworks for doing that too, such as JS.Class. Or mix and match the best tool for the job.

More Resources

Here are some more resources that you can take advantage of if you’re looking to learn more about JavaScript

Books:

• JavaScript: The Good Parts – Short book and a brilliant summation of the good and bad parts in JavaScript
• JavaScript: The Definitive Guide – If you have to have that 900 page book :-) But… you might want to wait for the 6th edition

Videos:

• Crockford on JavaScript – This will take you a full day to watch, but it’s well worth it.

Filed under: JavaScript, Technical Tagged: | javascript, js