Creating Classes
Traditionally, JavaScript classes are defined by defining a function and then adding instance methods and variables to its prototype. Class (static) methods and variables are added directly to the function object. The function itself serves as a constructor.
The following code shows the creation of a class in traditional JavaScript:
var ExampleClass = function(initialValue) {
this.anotherInstanceVariable = initialValue;
};
ExampleClass.prototype.instanceVariable = 5;
ExampleClass.prototype.instanceMethod = function(x) {
return this.anotherInstanceVariable + this.instanceVariable - x * 2;
};
Once defined, the class can be instantiated as shown in the following code. Instance methods can then be invoked on the class using the period (".") operator, just like in Java.
var anInstance = new ExampleClass(12); alert(anInstance.instanceMethod(3));
Introducing Core.extend()
CoreJS provides a function, Core.extend(), which automates this process with the intent of eliminating potential developer mistakes, providing a simpler syntax, providing additional capabilities, and enabling increasing the maintainability of JavaScript code.
The Core.extend() function is used to create a new instantaible JavaScript class. The function returns the created class, which may then be instantiated with the new operator. The function takes two arguments, a base class and a definition object. The base class argument may be omitted when defining a class derived directly from Object. The features of the class, including its constructor, instance methods, instance variables, class methods, and class variables are defined in the definition object.
The following code is identical to the previous class definition example, but this time using Core.extend():
var ExampleClass = Core.extend({
instanceVariable: 5,
$construct: function(initialValue) {
this.anotherInstanceVariable = initialValue;
},
instanceMethod: function(x) {
return this.anotherInstanceVariable + this.instanceVariable - x * 2;
}
});
If the syntax above looks confusing, realize that we are simply passing a JavaScript object literal to the Core.extend() method. If you are unfamiliar with these, see CoreJS.Literals.
Properties of the definition object that begin with a dollar sign ($) are specially interpreted by Core.extend(). The $construct method is used to specify the constructor of the object. These will be discussed later, for now note that the special properties consist of:
$construct: Specifies a constructor.
$abstract: Marks the class as abstract if the value is 'true', or marks the class as abstract and defines abstract methods if the value is another definition object.
$virtual: Defines methods which may be overridden by subclasses.
$static: Defines static (class) properties of the constructor
$load: Specifies a static initializer function that will be executed one time when the class is defined.
$include: Specifies an array of objects whose properties will be added to the class.
Properties of the definition object that DO NOT begin with a dollar sign are added to the prototype of the object. They will become instance variables or instance methods.
Class (Static) Properties
Class methods, class variables and constants can be defined using Core.extend(). They are placed within a "$static" object, as swhon:
var ExampleClass = Core.extend({
$static: {
// A 'constant' because it's in all caps. Of course, it's only a constant because
// no one in their right mind will change it, and the docs say not to.
THIS_IS_A_CONSTANT: true,
// Another static variable.
_numberOfErrors: 0,
// Another static variable.
// Note that the 'this' pointer refers to the class itself, not an instance thereof.
displayError: function(ex) {
alert("Egad! A horrible error has occurred: " + ex + ", this has happened "
+ this._numberOfErrors++ + " times before.");
}
}
});