Inheritance through Prototypes: Object Inheritance with Prototypes - www.docjavascript.com

Object Inheritance with Prototypes

Inheritance is often the first word that comes to mind when thinking of object-oriented programming languages. In JavaScript, inheritance is implemented by extending two objects through a third common one. Usually the extending object includes basic utilities and properties that can be shared by the two extended objects. There are several classic examples for inheritance. A class of rectangle and a class of circle may inherit basic operations from a basic shape class, for example. These basic utilities, such as copy(), paste(), and delete(), are shared by all shape types.

We chose to demonstrate inheritance via our animation scripts from column 19, JavaScript Animations, Part II. We presented two scripts in this column, one for a regular animation and one for a nested one. We will not repeat the scripts here, just delve into changes we made. Demonstrations can be seen here for the regular animation, and here for the nested animation.

The object inherited by both animations is called animation_toolbox. We define animation_toolbox to include basic utilities such as show, hide, and moveTo. Here is the full definition:

function animation_toolbox() {
  this.show = show;
  this.hide = hide;
  this.left = left;
  this.top = top;
  this.moveTo = moveTo;
  this.slideBy = slideBy;
  this.lineSlide = lineSlide;
  this.slideTo = slideTo;
  this.circle = circle;
  this.circleSlide = circleSlide;
}

Using this common object, the simple animation code becomes much shorter:

function animation_simple(id) {
  this.element = (NS4) ? document[id] : document.all[id].style;
  this.active = 0;
  this.timer = null;
  this.name = id + "Var";
  eval(this.name + " = this"); 
}

The nested animation script is also more compact now:

function animation_nested() {
  var args = animation_nested.arguments;
  if (NS4) {
    this.element = window; // the window object
    for (var i = 0; i < args.length; i++) {
      this.element = this.element.document[args[i]];
    }
  } else {
    this.element = document.all[args[args.length - 1]].style;
  }
  this.active = 0;
  this.timer = null;
  this.name = args[args.length - 1] + "Var";
  eval(this.name + " = this");
}

The inheritance is accomplished via the prototype property:

animation_nested.prototype = new animation_toolbox;
animation_simple.prototype = new animation_toolbox;

Once the animation_toolbox been inherited, all its methods and properties are supported by each of the inheriting objects, animation_simple and animation_nested. Therefore, the invocation scripts for both animations are unchanged from Column 19. The invocation script is shown here for the simple animation and here for the nested animation. The object anim2, for example, is generated by the simple_animation constructor:

anim2 = new animation_simple("ball2");

In the following call to the slideBy() method, notice that you cannot tell that the method belongs to the inherited animation_toolbox object and not to the inheriting simple_animation object:

anim2.slideBy(200, -300, 10, 50, "myArray");

For more details on the animation algorithm, please refer to Column 19.

Produced by Yehuda Shiran and Tomer Shiran

Created: January 18, 1999
Revised: January 18, 1999

URL: https://www.webreference.com/js/column34/inherit.html