Foundation.js JavaScript Framework

Foundation.createClass

Foundation.js makes creating, extending and inheriting JavaScript classes easy. Simply include Foundation.js on the web page (as this page does), and the Foundation.createClass method is available.

This first example creates a basic class, one that does not extend or inherit any other class. A class called Person, with two properties, firstName and lastName, and one method, toString, which returns both, would be created like so:

var Person=Foundation.createClass(
   function(firstName,lastName) // This is the class constructor.
   {
      this.firstName=firstName;
      this.lastName=lastName;
   },
   {  // This is a comma-delimited list of methods.
      toString:function()
      {
         return this.firstName+" "+this.lastName;
      }
   });

With the code above, we can now execute the following and see what happens:

var p=new Person("John","Doe");
alert(p);

The second example extends the above class to make an Employee class by adding a third property, id. The class will override the toString method to include the id. When a class is class extends another class, the Super keyword is available in the constructor and methods, just as would be expected.

var Employee=Foundation.createClass(
   Person, //This is the class being extended.
   function (firstName,lastName,id) // This is the class constructor.
   {
      this.id=id;
   },
   {  // This is a comma-delimited list of methods.
      toString:function()
      {
         return Super.toString()+" "+this.id;
      }
   });

So, now we can execute the following and see what happens:

var e=new Employee("Jane","Doe",12345);
alert(e);

Note that it was not necessary to explicitly call Super in the constuctor. It is called implicitly at the beginning of the constructor with the same parameters unless the constructor overrides the call. In this example, the parameters to the Employee object are in a more formal order, and so the call to the parent class constructor must be made explicitly:

var Employee=Foundation.createClass(
   Person, //This is the class being extended.
   function (id,lastName,firstName) // This is the class constructor with parameters reordered.
   {
      Super(firstName,lastName); // Call the super with the correct parameters.
      this.id=id;
   },
   {  // This is a comma-delimited list of methods.
      toString:function()
      {
         return this.id+": "+this.lastName+", "+this.firstName; // Did not call the super's method this time.
      }
   });

Give it a whirl:

var e=new Employee(54321,"Doe","Jack");
alert(e);

A class can inherit methods from other classes as well. There is no parent/child class relationship when inheriting, methods and static methods of one class are simply copied to another.

As an example, consider the serializing class below (keep in mind it is meant to be a brief, working example):

var Serializable=Foundation.createClass(
   // No constructor, only some methods.
   {
      serialize:function()
      {
         var value="";
         var needComma=false;
         value+="{";
         for (var i in this)
            if (i.charAt(0)!="$" && typeof(this[i])!="function")
            {
               if (needComma)
                  value+=",";
               else
                  needComma=true;
               value+=i;
               value+=":";
               if (this[i]==null)
                  value+="null";
               else if (typeof(this[i])=="string")
                  value+="\""+this[i].cEncode()+"\"";
               else
                  value+=this[i];
            }
         value+="}";
         return value;
      },
      deserialize:function(value)
      {
         eval("value="+value);
         for (var i in value)
            this[i]=value[i];
      }
   });

The above methods (if properly fleshed out) could be very handy to many classes. In the previous examples, the Employee class is already extending the Person class. However, it can be changed to inherit the methods of the Serializer class as well like so:

var Employee=Foundation.createClass(
   Person, //This is the class being extended (first in the list).
   Serializable, //This is the class being inherited (any number before the constructor).
   function (id,lastName,firstName)
   {
      Super(firstName,lastName);
      this.id=id;
   },
   {
      toString:function()
      {
         return this.id+": "+this.lastName+", "+this.firstName;
      }
   });

Now take a close look at the code below and give it a go:

var e=new Employee(54321,"Doe","Jack");
alert(e.serialize());
e.deserialize("{firstName:\"Jill\",lastName:\"Doe\",id:12345}");
alert(e);

A class can extend only one class, but inherit from any number. If Person were changed to inherit from Serializable, it would not be necessary for Employee to inherit as well, as inherited methods are extended to child classes.

The syntax of the Foundation.createClass method is:

class=Foundation.createClass([classToExtend[,classToInherit[,classToInherit...]],]constructor[,methods[,staticMethods]]);