09/10: Javascript Inheritance

 

First option:constructor paradigm

function ClassA(sColor)
        {
            this.color = sColor;
            this.sayColor = function()
            {
                alert(this.color);
            };
        }

 

function ClassB(sColor, sName)
     {

// In javscript, a function name is just a pointer to function

// So get Inheritance , use a pointer to ClassA first , then initialize it, after that delete

 
         this.newMethod = ClassA;
         this.newMethod(sColor);
         delete this.newMethod; // delete the reference
        // using call: ClassA.call(this.sColor) to replace the last three lines

// useing apply: ClassA.apply(this, new Array(sColor)) to repalce the last three lines

 

this.name = sName;
         this.sayName = function()
         {
             alert(this.name);
         };
     }

 

Test:

 

     var objA = new ClassA("red");
       var objB = new ClassB("blue", "Nicholas");
       objA.sayColor(); //outputs “red”
       objB.sayColor(); //outputs “blue”, A’s property
      objB.sayName(); //outputs “Nicholas” 
       alert(objB.color); // output “red” , A’s property

 

 

Second option : prototype chaining

function ClassA() {
}
ClassA.prototype.color = “red”;
ClassA.prototype.sayColor = function () {
alert(this.color);
};

 

function ClassB() {
}
ClassB.prototype = new ClassA();

ClassB.prototype.name = “”;
ClassB.prototype.sayName = function () {
alert(this.name);
};

 

Test:

// Note ClassA (parent) constructor can not have parameter

var objA = new ClassA();
var objB = new ClassB();
objA.color = “red”;
objB.color = “blue”;
objB.name = “Nicholas”;
objA.sayColor(); //outputs “red”
objB.sayColor(); //outputs “blue”
objB.sayName(); //outputs “Nicholas”

 

Third option: Best solution

function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB(sColor, sName) {

ClassA.call(this, sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.name);
};

Test:

var objA = new ClassA(“red”);
var objB = new ClassB(“blue”, “Nicholas”);
objA.sayColor(); //outputs “red”
objB.sayColor(); //outputs “blue”
objB.sayName(); //outputs “Nicholas”