Using ECMAScript 2015 Objects

Custom Objects in ECMAScript – Part 3

ECMAScript 6

Foreword: In this part of the series I explain how to add properties, delete properties, change properties and modify the default result of a constructor.

By: Chrysanthus Date Published: 18 May 2016

Introduction

This is part 3 of my series, Custom Objects in ECMAScript. In this part of the series I explain how to add properties, delete properties, change properties and modify the default result of a constructor. 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. Whether an object is created by an independent constructor function, or from a class or in any other way, you modify the properties in the same way.

In ECMAScript any function is an object. To create an object, you need an explicit or implicit constructor function, which is an object and an explicit or implicit prototype, which is another object. The constructor function body may be empty. The properties of the prototype are the initial properties of any object created.

To create an object, you call explicitly or implicitly the constructor function. By creating an object, the constructor function simply makes a kind of copy of the prototype. That copy is the object. More than one object can be created by the constructor function, which just makes “copies” of the prototype. You can then go on to add properties to a particular object, delete properties of a particular object or change the values of properties of a particular object.

Any way used to create an object, has an explicit or implicit constructor function and an explicit or implicit prototype.

The following code shows how an explicit constructor function creates two objects using an explicit prototype. Each of the objects has two properties.

    <script type="text/ECMAScript">

        function ConstfFn()
            {

            }

        proto = new Object();

        proto.bookColor = "green";
        proto.bookWidth = "15cm";

        ConstfFn.prototype = proto;

        book1 = new ConstfFn();
        book2 = new ConstfFn();

    </script>

The objects are book1 and book2. Each of them has the same characteristics (properties).

Adding Properties
The following code is the above code modified, where a data property and a method have been added to the book1 object (read and try it):

    <script type="text/ECMAScript">

        function ConstfFn()
            {

            }

        proto = new Object();

        proto.bookColor = "green";
        proto.bookWidth = "15cm";

        ConstfFn.prototype = proto;

        book1 = new ConstfFn();
        book2 = new ConstfFn();

        book1.bookHeight = "20cm";
        book1.showBookHeight = function ()
            {
                alert(this.bookHeight);
            }

        alert(book1.bookHeight);
        alert(book2.bookHeight);

        book1.showBookHeight();
        book2.showBookHeight();

        alert(proto.bookHeight);

    </script>

If you tried the code, you would have noticed that no property was added to book2 and no property was added to proto.

Any object created is initially a “copy” of the prototype. The prototype is an object with properties (data properties and/or methods). The constructor creates an object by copying the prototype. After that the object can be modified, independent of the prototype.

To add a property, after creating the object, you just type the object name, a dot and the new property name (and then possibly an assignment).

Deleting Properties
You cannot delete a property in an object from the prototype, but you can delete an added property. In the following code, the added height property of the book1 object is deleted (read and try it):

    <script type="text/ECMAScript">

        function ConstfFn()
            {

            }

        proto = new Object();

        proto.bookColor = "green";
        proto.bookWidth = "15cm";

        ConstfFn.prototype = proto;

        book1 = new ConstfFn();
        book2 = new ConstfFn();

        book1.bookHeight = "20cm";
        book2.bookHeight = "20cm";

        delete book1.bookHeight;

        alert(book1.bookHeight);
        alert(book2.bookHeight);

    </script>

If you delete an added property from one object, the same property added to a different object, is not deleted. The syntax to delete a property is:

    delete objectName.propertyName

Changing the Value of a Property
To change the value of a property, just assign a new value. The following code, changes the color of book1 from green to blue:

    <script type="text/ECMAScript">

        function ConstfFn()
            {

            }

        proto = new Object();

        proto.bookColor = "green";
        proto.bookWidth = "15cm";

        ConstfFn.prototype = proto;

        book1 = new ConstfFn();
        book2 = new ConstfFn();

        book1.bookColor = "blue";

        alert(book1.bookColor);
        alert(book2.bookColor);
        alert(proto.bookColor);

    </script>

When the value of a property of an object is changed, the same value of the property of different objects or the prototype, is not changed.

Modifying the default result of a Constructor
Whether an object is being created from a class, or by an explicit independent constructor or by literal notation, there has to be a constructor and a prototype. The following code shows an independent explicit constructor with an embedded prototype:

    <script type="text/ECMAScript">

        function Book()
            {
                this.bookColor = "green";
                this.bookWidth = "15cm";
                this.bookHeight = "20cm";
            }

        book1 = new Book();
        book2 = new Book();
        book3 = new Book();

    </script>

The code creates three books, each with a green color, a width of 15cm and a height of 20cm. A prototype is a complete object with properties. When an object is just created, its properties are a kind of copy of the properties of the prototype. You can then go on to modify the properties of the object. It is the constructor that creates any object.

Always remember that the constructor (function) is an object and the prototype is also an object. Since the constructor is an object, it can also have properties. That is, properties can be added to the constructor. The above constructor produces the default result (books with standard characteristics).

It is normal to have a book, which is taller than it is wide. The above constructor produces such books most of the time. You may want occasionally to produce books that are wider than they are tall. To achieve this, add a property to the constructor to this effect. The programmer will have the choice of using the added property or not. If he does not use it, he produces a normal book; if he uses it, he produces a book that is wider than it is tall.

You add the property just as you would add to any other object, but without the parentheses of the constructor. The following code illustrates this:

    <script type="text/ECMAScript">

        function Book()
            {
                this.bookColor = "green";
                this.bookWidth = "15cm";
                this.bookHeight = "20cm";
            }

        Book.wide = function (param)
            {
                this.bookWidth = param;
            };

        book1 = new Book();
        book2 = new Book();
        book3 = new Book.wide("25cm");

        alert(book1.bookWidth);
        alert(book2.bookWidth);
        alert(book3.bookWidth);

    </script>

In the two functions “this” refers to the prototype. The two functions are objects and the second one is a property to the first. Both have the same prototype. The values of the properties that have not been addressed by the second function are not changed.

The syntax to create an object from a constructor function is:

    object = new Constructor([args])

The syntax to create a modified object from a constructor function is:

    object = new Constructor.property([args])

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

Chrys

Broad Network

Related Articles

Using ECMAScript 2015 Objects

Custom Objects in ECMAScript – Part 3

ECMAScript 6

Introduction

Related Links

Comments