JavaScript inheritance overwriting and calling class functions

If you want to inherit a class and then overwrite parts of it with new code, but still keep the original then you will need to use the call and apply functions in the correct order.

1) call the parent class first

2) save a reference to the original function first

3) apply the arguments of the new function back to the parent class function

Here's a working example.

function Animal(name) {

this.name = name;

this.run = function() {

console.log(this.name + " is running!")

}

}

function Rabbit(name) {

Animal.call(this, name); // call the parent constructor first to bring in the class 

var parentRun = this.run; // save a reference to the old run function

this.run = function() { // overwrite with a new run function

parentRun.apply(this); // call the previous run function

console.log(this.name + " is running 2!");

}

this.bounce = function() { // add a new class function

console.log(this.name+" is bouncing");

}

}

Rabbit.prototype = new Animal(); // this allows you to see the chain of prototypes in console log

var rabbit = new Rabbit('Andy');

rabbit.bounce();

rabbit.run();

var rabbit2 = new Rabbit('Bill');

rabbit2.bounce();

rabbit2.run();

console.log(rabbit, rabbit2);