Browsing articles tagged with " json"
Jun 27, 2011

object oriented javascript

intro
i recently had to write a firefox extension, and since extensions are written in javascript, and i am an object oriented programmer, i decided to write the extensions using object oriented javascript. there are a number of ways to achieve this and i will be discussing two of those options: using prototypes and using json. both have their pros and cons, personally i prefer json so i’ll discuss that one first.

json
writing a class in json is rather easy and looks similar to how it would be written in any other languages. first the class must be declared, then its attributes are listed, followed by its methods. here is an example:

var MyClass = {
    str: null,

    setStr: function() {
        this.str = arguments[0];
    },

    writeStr: function() {
         document.write(this.str);
    }

}

to use this class you would instanciate an object of the type MyClass and then act on that object by using the methods available withint he object:

var Obj = new MyClass;
Obj.setStr("Hello World");
Obj.writeStr();

based on the code above that would set the attribute str to "Hello World" and then write it to the document. the one setback to using json is that there is no clearly defined constructor or destructor the way most object oriented languages have. the only way to have  either us to write them and then specifically call them them. if MyClass had a method called __construtor, for example, i would want to call Obj.__constructor immediately upon creating it, since that method would not auto execute. this leads me to the second way to write object oriented javascript, using prototypes.

prototypes
when using prototypes, the syntax is a little different and the final document does not look like a class the way it would in other object oriented languages. instead, the initial variable is set up as a method and then all other methods are set up as prototypes to that original variable. this results in the initial method acting as a sort of constructor for the class since it executes when instanciated. here is an example:

function MyClass() {
    this.str = null;

    if (document.location == "http://www.jessemazur.com") {
        this.str = "Welcome to Jesse Mazur's Website";
    }
};

MyClass.prototype.setStr = function() {
     this.str = arguments[0];
};

MyClass.prototype.writeStr = function() {
    document.write(this.str);
};

the class would be instanciated the same way as the json class, and used the same way. the difference is that the if statement inside the first method would execute as soon as the object was created. so it MyClass.setStr was never called, and you happend to be on my website (which you are!) the str attribute would be set to "Welcome to Jesse Mazur's Website".

i happen to thing the first example is nicer looking and easier to read, but lacks the constructor method that you might be used to. either way, neither of them have desctuctors. one other subtle difference to make note of is the syntax for separating the pieces. all attributes and methods in json are separated by commas, whereas prototypes end with a semicolon.