JavaScript being a prototype-based object language, it does not offer (in standard) a “class-based” OOP layer. This can become a problem when you're writing medium to large system, where prototypes start to be cumbersome to manage.

The famous JavaScript Prototype library provides a very basic way to create classes, but does not provide any inheritance between classes. Extensions such as ExtendClass and ExtendClassFurther tried to add sub-classing, but fail to have a flexible and reliable super-equivalent, which makes advanced JavaScript application development difficult.

Moreover, neither of these extensions allow meta-information specification to classes (such as class name, methods, parent class, etc), while this information is very useful for debugging and introspection.

Additionally, common cases such as handing an object method to a callback that may alter the this is not supported (jQuery callback do that).

Extend 2.0 is a simplified, cleaner version of the Extend 1.X library, with the same design goals:

• Traditional class-based OOP layer for JavaScript
• Notion of class attributes (shared), methods and class methods (operations)
• Introspection API to list attributes, methods, operations
• Makes the difference between what is inherited and what is not inherited
• Easy wrapping of object methods to be safely given as callbacks

To start using Extend, simply add the following line to your HTML head section:

<script type="text/javascript" src="http://www.ivy.fr/extend/extend.js"></script>

Once you've included the script, you can create classed by using the 'Extend.Class' function:

var A = Extend.Class({
  name:"A",
  methods:{
    helloWorld:function(){
      return "Hello, World !";
    }
  }
});
alert(new A().helloWorld());

The Extend.Class takes the following parameters, given in a dictionary:

• name (required): a string representing the class name. In case you want the class name to reflect a package hierarchy (like ui.widget.InputField), you can use dots to join module names and class name.

• parent: the parent class (if any) of this class.

• initialize: the constructor function for this class.

• properties: a dictionary mapping instance declaring attributes (properties) (and their optional default values).

• methods: a dictionary mapping method names to functions implementing the methods, where the this will refer to the current instance.

• shared: a dictionary mapping class attributes names to values. Class attributes default values are inherited by sub-classes, and can be accessed directly (like A.foo if foo is a class attribute of A)

• operations: a dictionary mapping class methods (operation) names to functions. The this in these functions will refer to the class object, as returned by Extend.Class.

In methods, you this will (obviously) point to the current instance. If you want to access the method foo defined in class A, when you are in class B subclass of A, you can do:

this.getSuper(A).foo()

or use the faster option:

this.A_foo()

where A is the name you gave to the class A.

Extend offers a set of methods that can are available to Extend classes and instances created from Extend classes. These methods range from simple introspection (what is the class of an object, what is this class name, is this an object an instance of this class, etc) to more complex things (safely wrapping a method for callback, listing inherited methods, etc).

Step 1: Create a new class

var Shape = Extend.Class(
  name:"Shape",
  initialize:function(){
    this.points = [];
  }
  methods:{
    addPoint:function(p){
      this.points.push(p);
    }
    getPoints:function(){
      return this.points;
    }
  }
});

Step 2: Create an instance of your class, and do stuff

my_shape = new Shape();
my_shape.addPoint([0,0]);
my_shape.addPoint([1,0]);
console.log(my_shape.getPoints().toSource());

Step 3: Create a subclass

var Rectangle = Extend.Class(
  name:"Rectangle",
  parent:"Shape",
  initialize:function(){
    this.points = [];
  }
  methods:{
    addPoint:function(p){
      this.points.push(p);
    }
    getPoints:function(){
      return this.points;
    }
  }
});

Using callbacks with jQuery

var MyWidget = Extend.Class({
  name:"MyWidget",
  methods:{
    onClick:function(target){
      $(target).css({background:yello});
    }
})

var w = new MyWidget()
$("#my-widget").click( w.getCallback("onClick") )