Updated below for ES6

March 2013 and ES5

This MDN document describes extending classes well:

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

In particular, here is now they handle it:

// define the Person Class

function Person() {}

Person.prototype.walk = function(){

alert ('I am walking!');

};

Person.prototype.sayHello = function(){

alert ('hello');

};

// define the Student class

function Student() {

// Call the parent constructor

Person.call(this);

}

// inherit Person

Student.prototype = Object.create(Person.prototype);

// correct the constructor pointer because it points to Person

Student.prototype.constructor = Student;

// replace the sayHello method

Student.prototype.sayHello = function(){

alert('hi, I am a student');

}

// add sayGoodBye method

Student.prototype.sayGoodBye = function(){

alert('goodBye');

}

var student1 = new Student();

student1.sayHello();

student1.walk();

student1.sayGoodBye();

// check inheritance

alert(student1 instanceof Person); // true

alert(student1 instanceof Student); // true

Note that Object.create() is unsupported in some older browsers, including IE8:

Object.create browser support

If you are in the position of needing to support these, the linked MDN document suggests using a polyfill, or the following approximation:

function createObject(proto) {

function ctor() { }

ctor.prototype = proto;

return new ctor();

}

Using this like Student.prototype = createObject(Person.prototype) is preferable to using new Person() in that it avoids calling the parent's constructor function when inheriting the prototype, and only calls the parent constructor when the inheritor's constructor is being called.

May 2017 and ES6

Thankfully, the JavaScript designers have heard our pleas for help and have adopted a more suitable way of approaching this issue.

MDN has another great example on ES6 class inheritance, but I'll show the exact same set of classes as above reproduced in ES6:

class Person {

sayHello() {

alert('hello');

}

walk() {

alert('I am walking!');

}

}

class Student extends Person {

sayGoodBye() {

alert('goodBye');

}

sayHello() {

alert('hi, I am a student');

}

}

var student1 = new Student();

student1.sayHello();

student1.walk();

student1.sayGoodBye();

// check inheritance

alert(student1 instanceof Person); // true

alert(student1 instanceof Student); // true

Clean and understandable, just like we all want. Keep in mind, that while ES6 is pretty common, it's not supported everywhere:

ES6 browser support

shareimprove this answer

edited May 31 '17 at 17:00

answered Mar 4 '13 at 0:33

Oliver Spryn

8,7372877161