Broad Network


ECMAScript Prototype

Inheritance in ECMAScript – Part 1

Foreword: In this part of the serires, I talk about ECMAScript Object Prototype.

By: Chrysanthus Date Published: 22 Sep 2014

Introduction

This is part 1 of my series, Inheritance in ECMAScript. In this part of the serires, I talk about ECMAScript Object Prototype. A prototype is a property of an ECMAScript object. A prototype is also an object.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Pre-Knowledge
Every computer language builds up. You need to learn something today in the language, and then use it to learn something at a higher level in the same language, tomorrow. This series is part of my volume, ECMAScript Course. At the bottom of this page, you have links to the different series you should have read before reaching here.

Variables, Functions and Objects in ECMAScript
Let us look at two variables and a function. The two variables hold two numbers. The function adds the two numbers. Here are the two variables and the function:

         var num1 = 4;
         var num2 = 5;
         function add ()
          {
          answer = num1 + num2;
          return answer;
          }

         var result = add();

As you can see in the code, there are two variables. The function adds the values of the two variables, and returns the answer. Below in the code, the function is called, and the return value is assigned to a new variable, result.

Now in programming (in a program code) you would find some functions that work with certain variables, such that if you remove one of the variables, the rest of the variables and the functions will not be very useful; if you remove one of the functions, the rest of the functions and the variables will still not be very useful. In other words, the variables and functions in question form a set. The above group of statements is such a set. Would it not be nice if we had such a set in one unit? In fact, many modern computer languages, have such a set in one unit called an object. Many modern languages have each, its own syntax or procedure for creating an object.

Properties and Methods
A programming object fundamentally has what is called properties and methods. This is not a big deal. In the above script we have one function, which works with two variables. If we are to make this “set”, an object, then the variables would become the properties and the function would become the method. The object will have two properties (data properties) and one method. An object can have any number of properties and any number of methods. As you can see it is not a big deal, all you have to do is to know the syntax or procedure that will make the variables, properties and the functions, methods.

The Object Scheme in ECMAScript
To create an object, you need a function and a prototype. The function is called the constructor function. As you know a function in ECMAScript is a special kind of object. The prototype is also an object. The prototype has to be a property of the constructor. You might have created objects without using a prototype, before. Well, the prototype was there, hidden from you. In this series, you will see how to create objects using non-hidden prototype.

The prototype indirectly has the properties and methods of the object you want to create. To create the object, you call the function constructor or use the function constructor in the new expression. That is the scheme or procedure to create an object. Note: an object can also be created by calling the Object() constructor, which is a method of the global object, but I will not discuss that approach in this series. If you have been reading the series in this volume, in the order given, then you should have studied that. What I discuss here is the standard scheme or procedure to create an object.

Creating the Prototypical Object
A prototypical object is the function constructor that indirectly has the prototype. In the prototypical object, the prototype has the properties and methods of the object to be created.

The prototypical object for the above set (two variables and one function) is:

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

Note the use of the reserved word, this. The reserved word is actually the prototype. The properties of the prototype are num1 and num2. The only method of the prototype is, add().The above structure is a function, but not any kind of function; it is a constructor function. The reserved word, this, is the prototype and in the function structure, it is a special property of the function. It is an object and it has two properties and one method.

Before you continue, note how the reserved word, this, has been used in the method declaration in the prototypical object. Also note how it has been used all over in the code.

The function constructor returns the prototype, this.

Creating an Object
You create an object from the function constructor, by calling the constructor as a function or by using the constructor signature e.g. “TheObject()” in the new expression. So to create an object from the above constructor function, you will either type,

    TheObject()

or

    new TheObject()

Each of these expressions returns the object, you want; note the “return this” expression in the prototypical object. In this tutorial, the prototypical object and the function constructor are the same structure.

The following code uses the first expression: Read and try it:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <script type="text/ECMAScript">

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

        obj = TheObject();

        result = obj.add();

        alert(result);

    </script>

</body>
</html>

The extra HTML code is to produce a web page. The result is 9. Note the use of the dot operator in the script. The following script uses the second constructor expression above:

    <script type="text/ECMAScript">

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

        obj = new TheObject();

        result = obj.add();

        alert(result);

    </script>

The result is 9, as expected.

Initializing an Object
Above, the object (obj) created is already initialized. That is, it is created with the properties having values already. You can have a prototypical object that is not initialized, and initialization will take place during object creation. In this case the function constructor needs parameters. The arguments for the parameters shall be  assigned to the prototype properties in the function constructor declaration (that is, in the prototypical object). In this case, the function constructor is called with the arguments. Read and try the following code that illustrates this:

    <script type="text/ECMAScript">

        function TheObject(no1, no2)
            {
                this.num1 = no1;
                this.num2 = no2;
                this.add  = function ()
                                {
                                    answer = this.num1 + this.num2;
                                    return answer;
                                }
                return this;
            }

        obj = new TheObject(4,5);

        result = obj.add();

        alert(result);

    </script>

You are not obliged to create an object with initialization. You can create an object and give values to the properties later. Read and try the following code that illustrates this:

    <script type="text/ECMAScript">

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

        obj = new TheObject();

        obj.num1 = 4;
        obj.num2 = 5;

        result = obj.add();

        alert(result);

    </script>

Note that in the prototypical object the properties are not assigned values. The code segment in the script that assigns values, is:

        obj.num1 = 4;
        obj.num2 = 5;

Note the use of the dot operator. The segment has to be after the statement that creates the object and before the method that uses the properties.

Before we leave, note that the constructor function can be used to create more than one object of the same type.

Time to take a break. We stop here and continue in the next part of the series.

Chrys

Related Links

ECMAScript Basics
ECMAScript Operators
Expressions and Statements in ECMAScript
Custom Object in ECMAScript
ECMAScript Global Object
The ECMAScript Array
The ECMAScript String Object
ECMAScript Regular Expressions
ECMAScript Date Object
ECMAScript Error Basics
Advanced Course
Number Objects in ECMAScript
Inheritance in ECMAScript
Advanced ECMAScript Regular Expressions
Mastering the ECMAScript (JavaScript) eval Function
More Related Links
Major in Website Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course

NEXT

Comments

Become the Writer's Fan
Send the Writer a Message