Performing inheritance in JavaScript

by

The JavaScript object oriented paradigm is prototype based. There are no “classes”, just objects.

You can implement inheritance in different ways. The two more popular alternatives are the “pseudo-classical” and the “prototypal” forms. For example:

Pseudo-classical inheritance

I think this is the most popular way. You create constructor functions that you use with the new operator, and you add members through the constructor function prototype.

// Define the Person constructor function
function Person() {}

Person.prototype.sayHello = function(){
    alert ('hello');
};

// Define the Student constructor function
function Student() {}

// Inherit from Person
Student.prototype = new Person();

// Correct the constructor pointer, because it points to Person
Student.prototype.constructor = Student;

// Replace the sayHello method (a polymorphism example)
Student.prototype.sayHello = function () {
    alert('hi, I am a student');
}

var student1 = new Student();
student1.sayHello();

Prototypal inheritance

Basically we make a helper function that takes an object as a parameter and returns an empty new object that inherits from the old one, objects inherit from objects.

// Helper function
if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

var person = {
    sayHello : function () {
        alert('Person object');
    },
    walk : function () {
        alert('walk');
    }
};

var student1 = Object.create(person);
student1.sayHello = function () {
    alert('hello I am a student');
};

Another interesting form is the parasitic inheritance. In the “derived” constructor you create a “base” object instance. That object is augmented and that new instance is returned: 

// Person constructor function
function Person(name) {
    this.name = name;
}

function Student(value) {
    var that = new Person(value);
    that.sayHello = function () {
        alert('hello I am a student');
    };
    return that;
}

More Related Contents:

  1. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  2. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  3. Is John Resig’s Javascript inheritance snippet deprecated?
  4. __proto__ VS. prototype in JavaScript
  5. Use of .apply() with ‘new’ operator. Is this possible?
  6. JavaScript inheritance and the constructor property
  7. How does __proto__ differ from constructor.prototype?
  8. How to extend Function with ES6 classes?
  9. What does it mean that Javascript is a prototype based language?
  10. JavaScript inheritance: Object.create vs new
  11. Why use Object.prototype.hasOwnProperty.call(myObj, prop) instead of myObj.hasOwnProperty(prop)?
  12. How to implement inheritance in JS Revealing prototype pattern?
  13. Properties of Javascript function objects
  14. How can I let a user download multiple files when a button is clicked?
  15. How to display binary data as image – extjs 4
  16. Can a JavaScript object have a prototype chain, but also be a function?
  17. Subclassing Javascript Arrays. TypeError: Array.prototype.toString is not generic
  18. Extend Javascript promise and resolve or reject it inside constructor
  19. Why are my JavaScript object properties being overwritten by other instances?
  20. Objects don’t inherit prototyped functions
  21. Javascript inheritance: call super-constructor or use prototype chain?
  22. Workaround for accessing class type arguments in static method in Typescript
  23. Is event a global variable that is accessible everywhere inside the callback chain?
  24. up() and down() versus Ext.getCmp()
  25. What is the value of var me = this;
  26. Open HTML5 date picker on icon click
  27. prototypal inheritance concept in javascript as a prototype based language
  28. Extending React.js components
  29. Explain ExtJS 4 event handling
  30. Super in Backbone

Leave a Comment