Click here to Skip to main content
15,868,016 members
Articles / Programming Languages / Javascript
Tip/Trick

Simple Inheritance Example in JavaScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (7 votes)
28 May 2014CPOL1 min read 13.9K   3   4
This is a simple inheritance example in JavaScript

Introduction

The aim of the tip is to explore a simple inheritance example in JavaScript. Yes, there are quite a good number of options to follow, but this solution worked fine for me.

Background

I have been working with JavaScript for a short period of time. By this time, I have been in a situation where the same code segment was repeated again and again. So I needed a way to reform them to reduce the code and centralize them. One option was to write the JQuery plugin. But using the normal function has not been the best option. I wanted to use inheritance as I do in C#. So I started Googling, after exploring some solutions, I adopted a solution which helped me a lot.

Using the Code

We will start with a basic base object Math which has the ability to find odds and evens from a given number array, using odds and evens prototypes.

JavaScript
/*Base object with prototypes*/
function Math() { }
Math.prototype.odds = function(numberArray) {
    return $.grep(numberArray, function(number) {
        return number % 2 === 1;
    });

};
Math.prototype.evens = function (numberArray) {
    return $.grep(numberArray, function (number) {
        return number % 2 === 0;
    });
};

Before we move on to the child object Calculator which will inherit from the base Math object, we need a utility function to help use in inheritance. And it would be like this, which copies all the prototypes of a given object. And returns the new object.

JavaScript
/*Utility to clone objects prototypes*/
function prototypeClone(baseObject) {
    function baseClone() { }
    baseClone.prototype = baseObject.prototype;
    return new baseClone();
}

Now we are going to use this utility function with the child object Calculator to inherit from the base object Math like this. Reforming the prototype constructor is very important work to do, the last line:

JavaScript
/*Child inheriting from base object*/
function Calculator() { }
Calculator.prototype = prototypeClone(Math);     //copy all the base prototypes to child
Calculator.prototype.constructor = Calculator;   //reform the prototype constructor to Calculator 

After this inheritance, the child Calculator object will be able to use odds, evens and all prototypes, which belong to the base object Math. And we can add new ones too to the Calculator object if we want to. Now test how the Calculator object works.

JavaScript
$(document).ready(function () {
    /*results*/
    var calculator = new Calculator();
    var odds = calculator.odds([1, 2, 3, 4, 5]);        
    var evens = calculator.evens([1, 2, 3, 4, 5, 6]);   
    alert(odds);    //1,3,5
    alert(evens);   //2,4,6
});

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralTip... Pin
Nitij6-Jun-14 0:04
professionalNitij6-Jun-14 0:04 
GeneralMy vote of 3 Pin
Murali Gowda28-May-14 19:29
professionalMurali Gowda28-May-14 19:29 
GeneralRe: My vote of 3 Pin
Nikola Breznjak29-May-14 2:28
professionalNikola Breznjak29-May-14 2:28 
GeneralRe: My vote of 3 Pin
Murali Gowda29-May-14 3:13
professionalMurali Gowda29-May-14 3:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.