jQuery - how to write classes to achive OO design

Question

Hi,

I have used Prototype.js in my past and was able to write classes uing:

var XEventDesc = Class.create();

XEventDesc.prototype = {

    initialize: function(element, eventName, handler, useCapture) {
        ....................
    }
};

How do I write classes in Javascript using jQuery

Answer 1

Do you really need to use jQuery to make a class? A javascript object is just a function.

var Rectangle = function(width,height) {
    //This section is similar to the initialize() method from prototypejs.
    this.width = width;
    this.height= height;

    //Adding a method to an object
    this.getArea = function () {
        return this.width*this.height;
    }
}
var myRect = new Rectangle(3,4);
alert(myRect.getArea()); //Alerts 12

Answer 2

There appear to be some jQuery plugins that do this (e.g., http://plugins.jquery.com/project/HJS). However, you'll probably find something that better fits your needs outside of jQuery.

Answer 3

The fundamental thing to understand is that Javascript doesn't have the concept of classes. It uses what's known as prototypal inheritance.

Instead of "Here's a blueprint. Build objects from it.", Javascript is based around "Here's a prototype. Mass-produce it." (Functions stand in for classes so you create a fully usable function and then tell Javascript to make more of it or to use it as the reference point for defining other functions)

Here are a few explanations of the implications of such a paradigm and how to implement inheritance in JS: (Just in case some of them explain it in a way you have trouble with)

• webreference - Prototypal Inheritance Explained
• How To Node - Prototypal Inheritance
• Mozilla Developer Center - Inheritance revisited
• Douglas Crockford - Prototypal Inheritance in JavaScript

Answer 4

jQuery supports an extend method (http://api.jquery.com/jQuery.extend/), which mimics multiple inheritance by allowing you to extend an object with the properties of as many objects as you want. This only mimics multiple inheritance, because it essentially uses a for-loop to iterate over the properties of the other objects and attaches them to the targeted one -- if it actually provided multiple inheritance, you would be able to add/remove/modify attributes from one of the super objects and have the changes inherited by the sub object, but that isn't the case.

To use jQuery.extend, you provide the target object as the first parameter, and the others with which to extend it as following parameters. Be careful, though, because if you only specify the first object, all the object's properties will be used to extend jQuery itself.

(function($) {

var SuperOne = {

    methodOne: function() {
        alert("I am an object");
    },

    methodTwo: function(param) {
        // do something
    }
},

SuperTwo = {

    attributeOne: 'I am a super object',

    getAttributeOne: function() {
        return this.attributeOne;
    },

    setAttributeOne: function(attributeOne) {
        this.attributeOne = attributeOne;
    }
},

SubOne = $.extend({

    subMethodOne: function() {
        return 'I inherit from others.';
    }
}, SuperOne, SuperTwo);

alert(SubOne.getAttributeOne()); ///<-- alerts, "I am a super object"

SuperTwo.setAttributeOne("I am SuperTwo!");

alert(SubOne.getAttributeOne()); ///<-- alerts, "I am a super object", still

SuperOne.methodOne = function() {
    alert("I am SuperOne!");
};

SubOne.methodOne(); ///<-- alerts, "I am an object", instead of, "I am SuperOne!"

}(jQuery));