Classes in ECMAScript 2015

Custom Objects in ECMAScript – Part 2

ECMAScript 6

Foreword: In this part of the series I explain how to create objects from a class.

By: Chrysanthus Date Published: 18 May 2016

Introduction

This is part 2 of my series, Custom Objects in ECMAScript. In this part of the series I explain how to create objects from a class. You should have read the previous part of the series before coming here, as this is a continuation.

Set of Variables and Functions that work together
Consider the following code segment:

        num1;
        num2;

        function add()
         {
                sum = num1 + num2;
                return sum;
         }

This segment has two variables and one function. If num1 is given the value, 3 and num2 is given the value 4, then the add() function can add the two values (variables) to return 7. If num1 is given the value 5 and num2 the value 6, then the add() function can add the two values to return 11. That is, different sets of values can be given to the variables to be added by the function.

Class
A class is a set of variables and functions that work together, were the variables have not been assigned values. Since the variables have not been assigned values, the class is not directly usable. When you assign values to the variables, you get an object. If you assign a different set of values to the variables, you get a different object. You can create different objects of the class by assigning different sets of values.

The variables are actually called, data properties. The functions are actually called, methods. In order to have a class, you need special coding; you do not just bring the variables and functions together in your own way.

When you create an object from a class, you are said to instantiate the class.

Data properties and methods of a class, are simply called properties, in ECMAScript.

Class Declaration
Class declaration is class description. The following code describes a class for the above set of variables and functions that work together:

    <script type="text/ECMAScript">

        class Calculator

            {
                constructor(no1, no2)
                    {
                        this.num1 = no1;
                        this.num2 = no2;
                    }

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

        obj = new Calculator(3, 4);

        answer = obj.add();

        alert(answer);

    </script>

Read and try the code, if you have not already done so. The output is 7. To declare a class, you begin with the reserved word, class. This is followed by the name of the class (preferably beginning with an uppercase character). After that you have a block. In the block, you have functions (methods).

The most important method in the block is called the constructor. constructor is a reserved word, inside a class declaration. For any data property of the class that needs initialization (assigning value for the first time), this method defines the property and assigns values to them. In the method, you use the word, “this” to refer to the object (to be instantiated).

Any other method, in the class declaration still uses the word, “this” to refer to the object. To have a data property, start with the word, “this”; and then type the name of the (new) property.

A method, such as add() in the class, is declared without the reserved word, function. Inside the body of the method, any new variable is declared preceded by the reserved word, var.

Outside the class, the syntax for the statement to instantiate an object is:

    nameOfOvject = new NameOfClass(args)

In the above code, obj has been instantiated from Calculator in,

        obj = new Calculator(3, 4);

If you did not want the constructor, to receive arguments, then you would type it as follows:

                constructor()
                    {
                        this.num1 = 3;
                        this.num2 = 4;
                    }

and then the object would be instantiated as follows:

        obj = new Calculator();

Read and try the following code, which shows the same class without an explicit constructor:

    <script type="text/ECMAScript">

        class Calculator

            {
                num1(no1)
                    {
                        this.num1 = no1;
                    }
                num2(no2)
                    {
                        this.num2 = no2;
                    }

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

        obj = new Calculator();
        obj.num1(3);
        obj.num2(4);

        answer = obj.add();

        alert(answer);

    </script>

There is a method to define num1 and there is another method to define num2. The object is instantiated in the same way but without arguments for the constructor call. To assign a value to a data property, you use the syntax:

    objectName.propertyName(value)

Static Method
A static method is a method that can be called without instantiation of the class; it is also not callable when the class is instantiated. To call the method, use the class name and the dot. Let us look at an example. The formula for area of a circle is:

    A = pi x r x r

where pi is the constant, 2.14 and r is the radius. In the following code that calculates the area of a circle, whose radius is 5, pi is a static method.

    <script type="text/ECMAScript">

        class Area

            {

                static pi()
                    {
                        return 3.14;
                    }

                calcArea(r)
                    {
                        var a = Area.pi() * r * r;
                        return a
                    }
            }

        PI = Area.pi();

        alert(PI);

        obj = new Area();

        answer = obj.calcArea(5);

        alert(answer);

    </script>

Note how pi() has been accessed inside and outside the class declaration (without use of any object). To declare a static method, precede it in the class declaration, with the reserved word, static. The answer from the code is 78.5, from the second alert box.

Before we leave this part of the series, note that whether an object is created from a class or from an explicit independent constructor or from a literal notation, in the process, there is a constructor and a prototype. The constructor for all these ways is the same.

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

Chrys

Broad Network

Related Articles

Classes in ECMAScript 2015

Custom Objects in ECMAScript – Part 2

ECMAScript 6

Introduction

Related Links

Comments