Broad Network


Inheritance in ECMAScript 2015

Custom Objects in ECMAScript – Part 4

ECMAScript 6

Foreword: In this part of the series I explain inheritance in ECMAScript, by direct use of prototype and by classes.

By: Chrysanthus Date Published: 18 May 2016

Introduction

This is part 4 of my series, Custom Objects in ECMAScript. In this part of the series I explain inheritance in ECMAScript, by direct use of prototype and by classes. You should have read the previous parts of the series before coming here, as this is a continuation.

In ECMAScript, data properties and methods are simply called, properties. An inherited object is an object, which has the properties of its parent and its own additional properties.

Inheritance by direct use of Prototype
Whether you are using the class scheme or not, to create an object, you need a constructor and a prototype. The prototype is an object with data properties and/or methods. The constructor function creates an object by making a kind of copy of the prototype.

So, to inherit an object, you need two prototypes: one for the parent object and one for the child object. The one for the child object is a copy of the one for the parent object with additional properties. The following code illustrates this (read and try it):

    <script type="text/ECMAScript">

        function Calculator()
            {
                this.num1 = 4;
                this.num2 = 5;
                this.add  = function ()
                                {
                                    answer = this.num1 + this.num2;
                                    return answer;
                                }
                return this;
            }

        function CalculatorChild()
            {
                this.fixedVal = 8;
                this.square  = function (sum)
                                {
                                    sqr = sum * sum;
                                    return sqr + this.fixedVal;
                                }
                return this;
            }

        CalculatorChild.prototype = new Calculator();

        calcChild = new CalculatorChild();

        sum = calcChild.add();
        result = calcChild.square(sum);
        alert(result);

    </script>

The parent constructor function and the child constructor function each has the embedded prototype. In each constructor function, “this” refers to the prototype. The parent object adds two numbers; the child object squares that sum and adds a fixed number to it. I hope you can identify the properties in the parent and child objects.

The key statement to the inheritance is:

        CalculatorChild.prototype = new Calculator();

where prototype is a reserved word. This statement makes a copy of the parent prototype to the child prototype.

Inheritance by Classes
You can have a parent class and inherit a child class from it. You then go on to add properties to the inherited class and then instantiate an object from that. After declaring a class, the syntax to inherit the class is:

    class ChildClass extends ParentClass

where class and extends are reserved words. Read and try the following script, which re-codes the above script in terms of parent and child classes.

    <script type="text/ECMAScript">

        class Calculator
            {
                constructor()
                    {
                        this.num1 = 4;
                        this.num2 = 5;
                        this.add  = function ()
                                {
                                    var answer = this.num1 + this.num2;
                                    return answer;
                                }

                    }
            }

        class CalculatorChild extends Calculator
            {
                fixedVal()
                    {
                        this.fixedVal = 8;
                    }

                square(sum)
                    {
                        var sqr = sum * sum;
                        return sqr + this.fixedVal;
                    }
            }

        calcChild = new CalculatorChild();

        sum = calcChild.add();
        calcChild.fixedVal();
        result = calcChild.square(sum);
        alert(result);

    </script>

The constructor is inherited into the child class. The following code shows the case where the add() function is outside the constructor and the fixed value is given after the instantiation of the child object (read and try it):

    <script type="text/ECMAScript">

        class Calculator
            {
                constructor()
                    {
                        this.num1 = 4;
                        this.num2 = 5;
                    }

                 add()
                     {
                         var answer = this.num1 + this.num2;
                         return answer;
                     }
            }

        class CalculatorChild extends Calculator
            {

                square(sum)
                    {
                        var sqr = sum * sum;
                        return sqr + this.fixedVal;
                    }
            }

        calcChild = new CalculatorChild();

        sum = calcChild.add();
        calcChild.fixedVal = 8;
        result = calcChild.square(sum);
        alert(result);

    </script>

The super Reserved Word
It is possible to modify an inherited method while calling the parent method with the super reserved word. The following code illustrates this (read and try it):

    <script type="text/ECMAScript">

        class Calculator
            {
                constructor()
                    {
                        this.num1 = 4;
                        this.num2 = 5;
                    }

                 add()
                     {
                         var answer = this.num1 + this.num2;
                         return answer;
                     }
            }

        class CalculatorChild extends Calculator
            {

                 add()
                     {
                         var ans = super.add() * 2;
                         return ans;
                     }

                square(sum)
                    {
                        var sqr = sum * sum;
                        return sqr + this.fixedVal;
                    }
            }

        calcChild = new CalculatorChild();

        sum = calcChild.add();
        calcChild.fixedVal = 8;
        result = calcChild.square(sum);
        alert(result);

    </script>

The inherited method has the same name as the parent method, and that overrides the parent method. Within the block of the inherited method, the parent method is called using the super reserved word and the dot. In the above case, the result is multiplied by 2.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Related Links

ECMAScript Basics
ECMAScript Operators
Expressions in ECMAScript
Statements in ECMAScript
Custom Objects in ECMAScript
Functions in ECMAScript
ECMAScript Date Object
The ECMAScript String Object
ECMAScript String Regular Expressions
ECMAScript Template Literal
The ECMAScript Array
ECMAScript Sets and Maps
ECMAScript Number
Scopes in ECMAScript
Mastering the ECMAScript (JavaScript) eval Function
Sending Email with ECMAScript
ECMAScript Insecurities and Prevention
Advanced Course
Advanced ECMAScript Regular Expressions
Promise in ECMAScript 2015
Generator in ECMAScript 2015
ECMAScript Module
More Related Links
Node Mailsend
EMySQL API
Node.js Web Development Course
Major in Website Design
Low Level Programming - Writing ECMAScript Module
ECMAScript Course

BACK NEXT

Comments

Become the Writer's Follower
Send the Writer a Message