• OClass
• Usage
• Class definition
• init method - The constructor
• Overriding methods
• Getting the base class
• Getting the type of OClass instances
• Static class functions
• fromPojo
• Examples
• Creating a new class
• Inheritance
• Calling overridden methods
• Class events
• Class properties
• Comparers
• isOClassType
• Example
• Tutorials

OClass

Creates a new class.

Usage

var MyClass = OClass([baseClass] [, mixin] [, mixin] classDefinition);

Class definition

The class definition is a POJO that describes the properties and methods that make up your class.

var MyClass = OClass({

  property: "This is a property",

  init: function() {
    alert("This is the constructor");
  },

  method: function() { 
    alert("This is a method");
  }

});

init method - The constructor

If you define a method in your class definition called init, this will become the constructor. That is the function responsible for initialising the object when it is first created. Arguments passed into the class with the new keyword will be passed into the init method:

var MyClass = OClass({
  init: function( name, age ) {
    alert("Hello " + name + ", you are " + age + " years old");
  }
});

var mat = new MyClass("Mat", 27);
// alerts "Hello Mat, you are 27 years old"

var laurie = new MyClass("Laurie", 25);
// alerts "Hello Laurie, you are 25 years old"

Overriding methods

Overriding a method means to specify a new version of a base class method. Consider the following Animal class:

var Animal = OClass({
  speak: function() {
    alert("NOISE!");
  }
});

Calling speak on any instances of Animal will alert NOISE!. So if we create a specialised Dog class:

var Dog = OClass(Animal, {});

We will find that all animals speak in the same way:

var spider = new Animal();
var wolf = new Animal();
var fido = new Dog();
var zena = new Dog();

spider.speak(); // alerts "NOISE!"
wolf.speak(); // alerts "NOISE!"
fido.speak(); // alerts "NOISE!"
zena.speak(); // alerts "NOISE!"

But we can provide a specialised speak function for dogs, since we know they bark. To do so, we just provide a speak method (with exactly the same name) in the class definition of the child class:

var Dog = OClass(Animal, {
  speak: function() {
    alert("Woof");
  }
});

Now, not all animals sound the same:

var spider = new Animal();
var wolf = new Animal();
var fido = new Dog();
var zena = new Dog();

spider.speak(); // alerts "NOISE!"
wolf.speak(); // alerts "NOISE!"
fido.speak(); // alerts "Woof"
zena.speak(); // alerts "Woof"

Getting the base class

If a class has a base class it can be accessed by calling the .baseclass property.

var Base = OClass({});
var MyClass = OClass(Base, {});

if (MyClass.baseclass == Base) {
  alert("MyClass inherits from Base");
}

In the code sample above, the alert will be displayed because MyClass inherits from Base, and Base is set to MyClass.baseclass. If no base class has been defined the baseclass value will be undefined.

Getting the type of OClass instances

When you have created instances of your classes you can access a reference to the original OClass that was used to construct the object via the kind property on the instance.

var MyClass = OClass({});
var instance = new MyClass();

instance.kind === MyClass;
// true

Static class functions

Each class comes with a few static methods that allow some powerful functionality.

fromPojo

Creates a new class instance from a POJO (Plain old JavaScript object).

Given the following class:

var Animal = OClass({
  _name: null,
  _age: null
});

You can create a fully populated instance using fromPojo:

var dog = Animal.fromPojo({ name: "Fido", age: 2 });

dog._name
// = "Fido"

dog._age
// = 2

• fromPojo also works well with objx properties.
• see overriding fromPojo

Examples

Creating a new class

The following code creates a new class with a 'doSomething' method.

var MyClass = OClass({
  doSomething: function() {
    alert("I did something");
  }
});

Inheritance

The following code creates a simple Control class that (using jQuery's document ready functionality) calls its own onReady function when the page has loaded.

var Control = OClass({
  init: function() {
    $(this.onReady);
  },
  onReady: function(){
    alert("Control is ready");
  }
});

The LinkControl class below inherits this class and provides its own specialised onReady function:

var LinkControl = OClass(Control, {
  onReady: function() {
    alert("LinkControl is ready!");
  }
});

Let's create an instance of the LinkControl class:

var myLinkControl = new LinkControl();

When the page is ready, we'll see the following text in an alert:

LinkControl is ready!

Notice how we didn't have to write our onReady binding code in LinkControl, we got that for free by inheriting from the Control class.

Calling overridden methods

When a method is overridden, it is still accessible by prepending the base prefix base_. For example, to call the base constructor from within a new constructor, you could do:

init: function() {
  this.base_init.apply(this, arguments);
}

Class events

Including OEvent before OClass and setting the value of properties to the OEvent object will cause OClass to turn that property into a full event.

var Dog = OClass({
  onNoise: OEvent,
  bark: function() {
    this.onNoise("Woof!");
  },
  cry: function() {
    this.onNoise("Cry!");
  }
});

// create fido
var fido = new Dog();

// listen to when fido makes a noise and alert it
fido.onNoise(function(noise){ alert("Fido went: " + noise); });

// make fido bark
fido.bark(); // alerts "Fido went: Woof!"
fido.cry(); // alerts "Fido went: Cry!"

Class properties

Including OProperty before OClass and setting the value of properties to OProperty will cause OClass to turn that item into a full property.

var Dog = OClass({
  name: OProperty,
  age: OProperty
});

// create fido
var fido = new Dog();

// set fidos name and age
fido.name("Fido").age(12);

// get fidos age
var age = fido.age();
// age == 12

// alert fido's name and age
fido.name(function(n){ alert(n); }).age(function(a){ alert(a); });
// alerts "Fido"
// alerts 12

For more information on how to use properties, see the property plugin.

Comparers

OClass adds the following comparers to OCheck.

isOClassType

Comparer to check if an object is an instance of a specific OClass type.

Example

var MyClass1 = OClass({});
var MyClass2 = OClass({});
var MyClass3 = OClass({});

var items = [];

// add some instances
items.push(new MyClass1());
items.push(new MyClass2());
items.push(new MyClass3());
items.push(new MyClass1());
items.push(new MyClass2());
items.push(new MyClass3());
items.push(new MyClass1());
items.push(new MyClass2());
items.push(new MyClass3());

// use the .select plugin to get all items of type MyClass2
var myClass2Items = objx(items).select({ isOClassType: MyClass2 }).obj();

// myClass2Items.length == 3

Tutorials

• see Writing OO Code using Objx
• see Writing mixins and utilising advanced OClass delegates