Classes in Jscript - Part I

I am Ritesh Parikh and have recently moved to Jscript team as a SDET. While starting on Jscript I had a lot of questions. One of them was - Is JScript object oriented?

For a language to be object oriented, it has to provide support for the following:

· A mechanism for grouping related functionality into logical “modules” which encapsulate implementation details – i.e. mechanism to define a Class.

· A mechanism for re-using functionality, usually via some kind of inheritance

· A mechanism for treating different implementations as logically “the same kind of thing” – usually polymorphism is implemented via interface implementation and class inheritance

Jscript supports all of the above. In this blog I will describe how Jscript supports defining Classes.

JScript does not have a formal notion of a Class. As a result it is quite different from classic object-oriented languages like C++ or Java. Jscript does not support Class based inheritance , instead uses prototype based inheritance .

If Jscript does not have a formal notion of a Class then how does it support defining Classes and creating instances. This is what I am going to explain in this blog!!

Jscript does not support true Classes the way most traditional languages do. However it is possible to simulate Classes in Jscript using constructor functions and prototype objects.

Let’s first define a few terms that we will use through this post:

Class: (As in strongly typed languages) defines the structure of an object. It defines exactly what fields an object contains, their types and methods to operate upon the object.

In Jscript, the types are not defined.

Constructor functions: A function which is to be used with the new operator is called a constructorfunction or simply constructor. Its job is to initialize a newly created object with any properties that need to be set before the object can be used. This object is then returned by the new operator.

Prototype objects:

In Jscript, every object includes an internal reference to another object called as its prototype object except for original value of Object.prototype. Any properties of the prototype will appear as properties of the object for which it is the prototype.

With this information, we are all set to implement our first Class in Jscript.

We want to write a class Rectangle, which has width and height as its data and a method area that computes the area.

First step would be to define the class. But there’s no Class keyword supported by JScript. So how do we do it? This is how we do it:

Define a constructor function which initializes the required data.

function Rectangle (ht, wt) {

this.height = ht;

this.width=wt;

}

Next would be to create objects of type Rectangle.

var rect1 = new Rectangle(5,10);

var rect2 = new Rectangle(2,4);

Then define a function which computes the area for the rectangle object.

function computeArea(rObj) {

return rObj.height * rObj.width;

}

Call the function to compute area.

var rectArea = computeArea(rect1); //will return 50.

But this is not object-oriented in its strict sense. A better approach would be to invoke a method on the Rectangle object rather than passing the object to a function. This can be done by adding a method in the definition of the class. The Rectangle constructor would now look like:

function Rectangle (ht, wt) {

this.height = ht;

this.width=wt;

this.area = function() { return this.height * this.width;}

}

And the way area can be calculated for rect obj is:

var rect1Area = rect1.area(); // rect1.area() will return 50.

var rect2Area = rect2.area(); // rect2.area() will return 8.

This is a much better object oriented implementation but still not the most optimal. Here every Rectangle object created will have three properties – height, width and area. height and width for each Rectangle object might differ but area property would always refer to the same function object. What this means is area property is going to be common for any number of Rectangle objects. Then why can’t we have area as a shared property?

We can and this is where prototype objects come into picture:

Let’s define area as a property to the prototype object of Rectangle

Rectangle.prototype.area = function() {return this.height * this.width;}

rect1.area(); // will return 50.

rect2.area(); // will return 8.

From all that we did so far we gather the following information:

Constructor provides the name for the Class and initializes the properties which can be different in every instance of the Class. The prototype object for Rectangle is associated with its constructor and any properties defined by the prototype object are inherited by each and every object created using the constructor. Hence prototype object is the best place to define methods like area which remain the same for all Rectangle objects.

This has couple of advantages:

· Since all common methods (ones that can be shared by all objects) are defined as properties to the prototype object and are directly inherited by the objects, there is good amount of decrease in memory usage.

· In case a property is added to the prototype object after an object was created, then too the object would inherit the newly added property.

Though all objects can read the properties of their prototype object without any issues, modifying them can cause certain issues.. Why is this so?

If rect1 goes and modifies area property then any other object (rect2, rect3…) also get affected as they too would call the same area property to compute the area. Still any code is allowed to modify properties defined on the prototype object as long as the modification is directly on the prototype object itself, and not on the instance. Attempting to modify a prototype property on an instance creates a new property on the instance which overrides the prototype.

This is just the beginning for Classes in Jscript. In the later posts I would discuss the differences among Instance Properties & Class Properties, Instance Methods & Class Methods. Another thing we will be looking at will be data encapsulation and inheritance.

Hope you enjoyed this blog.

Thanks,

Ritesh

SDET, JScript Team