JavaScript inheritance for Beginners

Reusable code is something very useful and big applications would only be very hard to achieve without it. But as JavaScript doesn't have the best capabilities of OOP yet, it's a bit uncommon on how to inherit a child class from a parent class, to reuse its methods and properties. I will try to show you, how you can easily achieve child classes in JavaScript and also check if a class really is a class and a child class really is a child class of its parent.

Let's begin:

I have commented the source a bit to make it easier to understand. First, lets create a basic class in javascript:

// parent class
        function pet() {
            // privileged property  
            this.name = 'Nyan';

            // privileged function
            this.getName = function() { return this.name; }

            // privileged function
            this.setName = function(_name) { this.name = _name; }
        }   

        // public method
        pet.prototype.whatPet = function() {
            return 'Im a meme cat!';
        }

Nothing special here. We have some privileged methods and properties and a public method.

Now lets head over to its new child class

// child class magic
    function dog() {
        // call parent constructor
        pet.call(this);
                // override parents name-property
        this.name = 'Ceasar';
    }

    // is child of pet
    dog.prototype = new pet();
    // uses its own constructor
    dog.prototype.constructor = dog;

    // override public method: whatPet
    dog.prototype.whatPet = function() {
        return 'Im a flying superdog';
    }

Let's try it!

var myPet = new pet();

    document.write(myPet.whatPet()+' | My name is: '+myPet.getName()+'<br />');
    myPet.setName('Gandalf');
    document.write(myPet.whatPet()+' | My name is: '+myPet.getName()+'<br />');

    document.write('<br />');

    var mySecondPet = new dog();
    document.write(mySecondPet.whatPet()+' | My name is: '+mySecondPet.getName()+'<br />');
    mySecondPet.setName('Spot');
    document.write(mySecondPet.whatPet()+' | My name is: '+mySecondPet.getName()+'<br />');

    document.write('<br />');

    // Is myPet an instance of class pet?
    document.write('Is myPet instance of class pet: '+(myPet instanceof pet)+'<br />');
    // Is myPet an instance of class dog?
    document.write('Is myPet instance of class dog: '+(myPet instanceof dog)+'<br />');

    document.write('<br />');

    // is mySecondPet an instance of class pet?
    document.write('Is mySecondPet instance of class pet: '+(mySecondPet instanceof pet)+'<br />');
    // is mySecondPet an instance of class dog?
    document.write('Is mySecondPet instance of class dog: '+(mySecondPet instanceof dog)+'<br />');

Nothing special, just assigning our freshly created new classes pet and dog. We output their name and type, reassign the name using public method setName() and check again. The most interesting part in here is definitely the instanceof operator. This nice little piece allows us to check if a variable is an instance of a given class. In our case, myPet instanceof pet would be true, but myPet instanceof dog would be false. mySecondPet, which is an instance of our child class dog, would output true on class pet and dog.

Output

Im a meme cat! | My name is: Nyan
Im a meme cat! | My name is: Gandalf

Im a flying superdog | My name is: Ceasar
Im a flying superdog | My name is: Spot

Is myPet instance of class pet: true
Is myPet instance of class dog: false

Is mySecondPet instance of class pet: true
Is mySecondPet instance of class dog: true

jsFiddle Demo