JavaScript Classes : Inheritance

If you come from C# or Java, JavaScript inheritance is a little different than what you are used to.  In JavaScript you don't inherit from a class, but you inherit the classes' prototype object.  In our previous post we created an Account class.  In this post we are going to inherit from the account class.  First let's recreate the Account class with the code below.

    <script>
    <script>
        function Account(balance, type) {
            this.balance = balance;
            this.type = type;
        }

        Account.prototype.deposit = function (d) {

            this.balance = this.balance + d;
            return this.balance;
        }

        Account.prototype.withdrawal = function (w) {
            this.balance = this.balance - w;
            return this.balance;
        }

    </script>

As a review the above code creates a class call Account with properties and methods through the prototype object.  Now lets say we have another kind of account class which is the Premium account class this class can make withdrawal, and deposit like the regular account.  But it can do more like transfer to another account.  Also it pays a 5% interest on the balance.  Therefore, programmatically we want to inherit from the base class which in this case is the Account class. This is how we would inherit from the Account class and build a Premium class.  First let's create the "inherits" function which will inherit the prototype object from the Account class to the Premium class.


        function inherits(baseClass, childClass) {
            childClass.prototype = Object.create(baseClass.prototype);
        }

As you can see its not really a real inheritance, it's more of a simulation of an inheritance.  We cloned or copy the prototype object of the Account class, which in this case is the base class.  Think of the base class the original copy, and Premium class the clone.  But the clone can have it's own methods after it has been cloned.  Kind of like the T1000 in Terminator.

Now let's create the Premium class

        function Premium(balance,type) {
            this.balance = balance + (balance*.05);
            this.type = type;
        }

As you can see the T1000, I mean the Premium class has it's own way of figuring out the balance with a 5% interest.

Now let's call the "inherits" function to inherit from the Account class.

        inherits(Account, Premium);

Now that we inherited from the Account class we are going to add the "transfer" function that is exclusive to the Premium class

        Premium.prototype.transfer = function (from, to, amount) {
            from.balance -= amount;
            to.balance += amount;
        }

This is in addition to the regular Account class's function, but only exists for Premium accounts.

So if I open an Premium account I can still do all the things that the regular account can do like deposit and withdrawal

First let's create a Premium account

        var p = new Premium(1000, "Checking");

Now let's look at the balance, remember the balance for Premium account is the balance plus 5%

        console.log("p balance: ");
        console.log(p.balance);




Now let's call the Account functions, "deposit" and "withdrawal", which we should be able to do because we inherited from the Account class

        p.deposit(500);
        console.log("p balance after deposit of $500: ");
        console.log(p.balance);

        p.withdrawal(200);
        console.log("p balance after widthdrawal of $200: ");
        console.log(p.balance);







Notice the deposit and withdrawal function does not add the 5% to the deposit because it's using the Account's inherited functions.  To get the correct balance for the Premium class we can override the deposit and function.  Like this

        Premium.prototype.deposit = function (d) {
            this.balance = this.balance + d;
            this.balance = this.balance + (this.balance * .05);
            return this.balance;

        }




Now let's call our transfer function which only exists in the Premium account

        var p = new Premium(1000, "Checking");
        var p2 = new Premium(2000, "Saving");

        p.transfer(p2, p,600);
        console.log("p balance after transfer 0f $600 from p2: ");
        console.log(p.balance);
        console.log("p2 balance after transfer of $600 to p1: ");
        console.log(p2.balance);

First we created two premium accounts so that we can perform the transfer, then we make the transfer of $600







Notice that the balance has not been adjusted for the 5%, well we could modify the transfer function.  Or we can created another function call "rebalance" that adds the 5% to the balance.  Let's create the rebalance function.

        Premium.prototype.rebalance = function()
        {
            this.balance += this.balance * .05;
        }

And change our transfer function to this

        Premium.prototype.transfer = function (from, to, amount) {
            from.balance -= amount;
            to.balance += amount;
            from.rebalance();
            to.rebalance();
        }

Now we will get the correct balance

In programming there's more than one way to solve a problem.  Like in this post, we resolve the rebalancing of the account with two methods.  First we resolve it by overriding the deposit function.  Then we use another method, by creating a new rebalance function. Either method is fine.

Here is full code

    <script>
        function Account(balance, type) {
            this.balance = balance;
            this.type = type;
        }

        Account.prototype.deposit = function (d) {

            this.balance = this.balance + d;
            return this.balance;
        }

        Account.prototype.withdrawal = function (w) {
            this.balance = this.balance - w;
            return this.balance;
        }


        function inherits(baseClass, childClass) {
            childClass.prototype = Object.create(baseClass.prototype);
        }

        function Premium(balance,type) {
            this.balance = balance + (balance*.05);
            this.type = type;
        }


        inherits(Account, Premium);

        Premium.prototype.transfer = function (from, to, amount) {
            from.balance -= amount;
            to.balance += amount;
            from.rebalance();
            to.rebalance();
        }

        Premium.prototype.deposit = function (d) {
            this.balance = this.balance + d;
            this.balance = this.balance + (this.balance * .05);
            return this.balance;

        }


        Premium.prototype.rebalance = function()
        {
            this.balance +=  this.balance * .05;
        }
        var p = new Premium(1000, "Checking");
        var p2 = new Premium(2000, "Saving");

        console.log("p balance: ");
        console.log(p.balance);
        console.log("p2 balance: ");
        console.log(p2.balance);

        p.deposit(500);
        console.log("p balance after deposit of $500: ");
        console.log(p.balance);

        p.withdrawal(200);
        console.log("p balance after widthdrawal of $200: ");
        console.log(p.balance);

        p.transfer(p2, p,600);
        console.log("p balance after transfer 0f $600 from p2: ");
        console.log(p.balance);
        console.log("p2 balance after transfer of $600 to p1: ");
        console.log(p2.balance);
    </script>