Tech Junkie Blog - Real World Tutorials, Happy Coding!: JavaScript Classes : Inheritance

Thursday, December 30, 2021

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>


3 comments:

  1. Most of the institutes are shifting their classes to online mode these days. Now, when you find the positive side of this, there is a huge negative side to this. If it were a theoretical subject, students might be able to finish this easily. But Java is a programming language, and only practical classes can help a student properly earn the subject. Now under such circumstances, if you are looking for Java assignment help, you are not wrong! Students need to have regular classes in order to learn and rule the subject. But with the distant learning process, the whole thing seems very tough for them. Hence, going for Java programming assignment help is the easiest thing they can go for!

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. The cognac leather jacket offers a refreshing alternative to bolder colors. This neutral shade, reminiscent of a desert sunset, exudes a warmth and casual sophistication. Unlike brown's richness, tan leather feels approachable and effortlessly cool. The smooth leather adds a touch of understated luxury, perfect for everyday wear or a night out.

    ReplyDelete

Search This Blog