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

Broad Network

Related Articles

Inheritance in ECMAScript 2015

Custom Objects in ECMAScript – Part 4

ECMAScript 6

Introduction

Related Links

Comments