Inherit in JavaScript.

Many people say that javascript can’t inherit, they ussually use extend function to simulate inherit in javascript. The extend function is a function that copy all properties of base prototype, but it can’t copy fields created in constructor method. And after extended, derive “class” don’t have any relations to base “class”. if base “class” adds a new method to prototype, derive object will not see it.

After read ECMA-262 specification, i see that in javascript, we can inherit a “class” directly by set prototype of derive “class” to a base object. Example:

<script type="text/javascript">
// This demo is created by Phan Tuan Anh, HCMUS.
function base() {
    this.abc = 5;
}

base.prototype.func = function() {
}

function derive() {
    this.mnt = 6;
    this.name = "derive";
}

derive.prototype = new base();
derive.prototype.constructor = derive;

derive.prototype.func2 = function() {
    this.name += ".fun2";
}

derive.prototype.func3 = function() {
    alert("derive.func3");
}

var a = new base();
var b = new derive(); // view in debugger you will see b
                      //  have all method and file created in base

function derive2() {
    this.xyz = 10;
    this.name = "derive2"; // create new name value
    // you will see func2 of derive also use this value.
}

derive2.prototype = new derive();
derive2.prototype.constructor = derive2;

derive2.prototype.func3 = function(name) {
    alert("derive2.func3");
}

derive2.prototype.func4 = function() {
}

var c = new derive2();  // c have all method and field of base and derive

b.func3();c.func3();    // derive2 overwrite (hide base method, not override) func3 of derive.
                        // but in javascript it is similar override.

c.func2();alert(c.name); // func2 change local field of c, not field in prototype

// dynamic add method to base prototype
base.prototype.func5 = function() {
    alert("func5");
}

c.func5(); // derive object also see change on base prototype
</script>

Save this code to a html file and run by a debugger. You will see derive object has all methods and fields created by base class. When you add a new method to prototype of base class(”func5″ in above example), derive object also see it.

Warning: base constructor will not be called when you create new object of derive class. base constructor only call once when you create derive prototype, all base fields are shared at prototype. The first time you set a property at derive object, it will create a local field (with same name) at derive object.