How to inherit from a class in javascript?

Question

In PHP/Java one can do:

class Sub extends Super
{
}

And automatically all public/protected methods, properties, fields, etc of the Super class become a part of the Sub class which can be overridden if necessary.

What's the equivalent for that in Javascript?

Answer 1

function super ( ) {
  this.color = "blue";
}

function sub ( ) {

}
sub.prototype = new super( );
sub.prototype.showColor = function ( ) {
 console.log( this.color );
}

var instance = new sub ( );
instance.showColor( ); //"blue"

Answer 2

you can't (in the classical sense). Javascript is a prototypical language. You will observe that you never declare a "class" in Javascript; you merely define the state and methods of an object. To produce inheritance, you take some object and prototype it. The prototype is extended with new functionality.

Answer 3

In JavaScript you don't have classes but you can get inheritance and behavior reuse in many ways:

Pseudo-classical inheritance (through prototyping):

function Super () {
  this.member1 = 'superMember1';
}
Super.prototype.member2 = 'superMember2';

function Sub() {
  this.member3 = 'subMember3';
  //...
}
Sub.prototype = new Super();

Should be used with the new operator:

var subInstance = new Sub();

Function application or "constructor chaining":

function Super () {
  this.member1 = 'superMember1';
  this.member2 = 'superMember2';
}


function Sub() {
  Super.apply(this, arguments);
  this.member3 = 'subMember3';
}

This approach should also be used with the new operator:

var subInstance = new Sub();

The difference with the first example is that when we apply the Super constructor to the this object inside Sub, it adds the properties assigned to this on Super, directly on the new instance, e.g. subInstance contains the properties member1 and member2 directly (subInstance.hasOwnProperty('member1') == true;).

In the first example, those properties are reached through the prototype chain, they exist on an internal [[Prototype]] object.

Parasitic inheritance or Power Constructors:

function createSuper() {
  var obj = {
    member1: 'superMember1',
    member2: 'superMember2'
  };

  return obj;
}

function createSub() {
  var obj = createSuper();
  obj.member3 = 'subMember3';
  return obj;
}

This approach is based basically on "object augmenting", you don't need to use the new operator, and as you can see, the this keyword is not involved.

var subInstance = createSub();

ECMAScript 5th Ed. Object.create method:

// Check if native implementation available
if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    function F() {}  // empty constructor
    F.prototype = o; // set base object as prototype
    return new F();  // return empty object with right [[Prototype]]
  };
}

var superInstance = {
  member1: 'superMember1',
  member2: 'superMember2'
};

var subInstance = Object.create(superInstance);
subInstance.member3 = 'subMember3';

The above method is a prototypal inheritance technique proposed by Crockford.

Object instances inherit from other object instances, that's it.

This technique can be better than simple "object augmentation" because the inherited properties aren't copied over all the new object instances, since the base object is set as the [[Prototype]] of the extended object, in the above example subInstance contains physically only the member3 property.

Answer 4

You can't inherit from a class in JavaScript, because there are no classes in JavaScript.

Answer 5

Well, in JavaScript there is no "class inheritance", there is just "prototype inheritance". So you don't make a class "truck" and then mark it as a subclass of "automobile". Instead, you make an object "Jack" and say that it uses "John" as a prototype. If John knows, how much "4+4" is, then Jack knows it, too.

I suggest you read Douglas Crockford's article about prototypal inheritance here: http://javascript.crockford.com/prototypal.html He also shows how you can make JavaScript have "look-alike" inheritance as in other OO languages and then explains that this actually means breaking javaScript in a way it was not meant to be used.

Answer 6

For further understanding of JavaScript's brand of object oriented programming, I highly recommend "JavaScript: The Good Parts" which talks about life without classes.

Answer 7

Consider using dojo javascript framework: it simulates classes and inheritance making it more like in OO languages.

Answer 8

I would recommend you read the chapter on Classes and Inheritance in the book "JavaScript 5 : The Definittive Guide" From what I know, there is no direct support for inheritance in JavaScript. One can simulate inheritance using neat tricks through.