JScript Blog : Object Orientation in JScript

Classes in JScript – Part III: Class Hierarchy and Data Encapsulation

don.raman — Wed, 31 Oct 2007 10:10:00 GMT

In this post I will be discussing how one can achieve Class Hierarchy and Data Encapsulation in JScript.

I will take the same example that was used for the first and second parts and will keep updating it as and when required.

function Rectangle (ht, wt) {

this.height = ht;

this.width=wt;

}

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

var rect1 = new Rectangle(5,10);

var rect2 = new Rectangle(2,4);

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

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

Languages that support class based inheritance define two distinct entities: Classes and Instances. We defined Class in first part as the structure of an object. It defines exactly what fields an object contains, their types and methods to operate upon the object. A Class is an abstract thing. There can be several instances of a single Class. Each Instance has its own state.

However languages (e.g. JScript) that support prototype based inheritance do not make distinction between Class and Instances. These languages just have objects. A prototype-based language has the notion of a prototype object, which means that an object is used as a template from which one can get the initial properties for a new object. Also any object can be specified as a prototype for another object.

In Class based languages, a hierarchy of classes can be created through Class definitions. In the definition of a Class, we can specify that it is a derived class of an existing Class.

As described in part I, JScript does not support the keyword Class. It simulates Classes using Constructor and Prototype Objects. Hence implementing hierarchy of classes is achieved by using Constructor and Prototype Objects.

Let’s extend the above example – Rectangle to take co-ordinates. Ideally we would want to have all 8 co-ordinates topLeftX, topLeftY, topRight(X & Y),bottomLeft(X & Y) and bottomRight(X & Y), but for simplicity we will consider only the first two.

Earlier in this post I mentioned that “Also any object can be specified as a prototype for another object.” We use this to achieve inheritance by specifying super class object as a prototype for the child class.

Define the class PositionedRectangle:

function PositionedRectangle (topLeftX,topLeftY,height,width) {

this.topLeftX = topLeftX;

this.topLeftY = topLeftY;

}

Assign a new Rectangle object as the prototype for PositionedRectangle class.

PositionedRectangle.prototype = new Rectangle;

Create an object for the above type:

var prObj = new PositionedRectangle(2,3,4,5);

When prObj is created, it inherits the height and width properties from the Rectangle object due to the prototype set above.

On executing the below statement we can see the values assigned to topLeftX, topLeftY, height and width members.

alert(prObj.topLeftX+" "+ prObj.topLeftY+" "+ prObj.height+" "+ prObj.width); // displays 2 3 undefined undefined

Since the height and width properties of Rectangle do not get set, we see “undefined” in the output for them. This is a limitation of the above method. If we had a constructor function for Rectangle which would set default values for height and width properties, say

function Rectangle () {

this.height = 1;

this.width=1;

}

The output would be 2 3 1 1. It still wouldn’t take the values passed by us.

To overcome this, some code needs to be added to the constructor function for PositionedRectangle.

function PositionedRectangle (topLeftX,topLeftY,height,width) {

this.topLeftX = topLeftX;

this.topLeftY = topLeftY;

//One option would be:

this.height = height;

this.width=width;

//Or second option would be calling the constructor for Rectangle itself

Rectangle(height,width);

}

PositionedRectangle.prototype = new Rectangle;

var prObj = new PositionedRectangle(2,3,4,5);

alert(prObj.topLeftX+" "+ prObj.topLeftY+" "+ prObj.height+" "+ prObj.width);

The output now would be 2 3 4 5. Here we just invoke the super class constructor as a method of the child class with the correct set of arguments.

So how does this work?

1. First, the new operator creates a generic object and sets its prototype property to PositionedRectangle.prototype.

2. The new operator then passes the new object to the PositionedRectangle constructor as the value of the this keyword.

3. Next it initializes topLeftX and topLeftY.

4. Since Rectangle was called within the scope of the newly created object, its properties (height and width) are correctly set.

5. On returning from the PositionedRectangle constructor, JScript assigns the new object to prObj.

If we want to further create a subclass for PositionedRectangle class, then we need to set PositionedRectangle object as a prototype for the derived class and invoke PositionedRectangle’s constructor from the subclass constructor as a method of the subclass.

Data Encapsulation:

Data encapsulation means that an object's data members should remain private to the object and manipulated through publicly exposed methods. Simply saying programs should not have the ability to modify the properties of objects directly.

By default the members of an object are public. No methods are required to access or modify these members.

In the above code,

rect1.height = 10; // will change the height from its old value to 10

How can we make the members private?

The answer is nested functions and not using this keyword for members. Lets add a member colour to the Rectangle class. We want colour to be private and be modified using publicly exposed methods.

function Rectangle (ht, wt) {

this.height = ht;

this.width=wt;

var colour = null; // colour now is a private member of this class.

this.setColour = setColour;

this.getColour=getColour;

//These methods will be used to access / modify colour.

function setColour (passedColour) {

colour =passedColour;

}

function getColour() {

return colour;

}

var rect1 = new Rectangle(5,10);

rect1.setColour (“blue”); // this will set colour to blue.

alert(rect1.getColour); // this will display blue as output.

alert(rect1.colour) // this would display undefined.

Rect1.colour =”red”; /*this will not throw any error but wouldn’t update colour member too. It will create an expando with name colour on the object.*/

alert(rect1.getColour); // this will still display blue as output.

alert(rect1.colour) // this would display red.

In this way we can define a private member and methods that manipulate it. Thus we can achieve Data Encapsulation in Jscript.

This is not everything that is there to talk about on Classes in Jscript, but this is good enough to get one started. Hope this post was helpful and fun to read!!

This completes the three parts that I had planned to write on this topic. Some more references to understand these concepts:

http://www.webdevelopersjournal.com/articles/jsintro3/js_begin3.html

http://dean.edwards.name/weblog/2006/03/base/

http://www.crockford.com/javascript/inheritance.html

http://devedge-temp.mozilla.org/viewsource/2001/oop-javascript/

Thanks,

Ritesh

SDET, JScript Team.

Classes in JScript – Part II: Instance Properties / Methods & Class Properties / Methods

don.raman — Sun, 30 Sep 2007 18:17:00 GMT

In this post I will discuss more about the Instance Properties & Instance Methods and Class Properties and Class Methods.

I will take the same example that was used for the first part and will keep updating it as and when required.

function Rectangle (ht, wt) {

this.height = ht;

this.width=wt;

}

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

var rect1 = new Rectangle(5,10);

var rect2 = new Rectangle(2,4);

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

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

The above sample code defines a constructor function Rectangle. Rectangle has 2 properties height and width. It also has one method area added to its prototype.

In the above example every instance of Rectangle will have its own copy of width and height properties. These properties are accessed through the individual instances created. For e.g.

height property of rect1 can be accessed and assigned to height of rect2 as

rect2.height = rect1.height;

The above line of code shows that these properties can be read from or written to using the individual instances with which they are associated.

Such properties are known as Instance Properties.

So what about area method? This too is accessed using an instance of Rectangle. This would classify as an Instance Method.

An Instance Method is similar to Instance Property except for couple of differences. One of them is that it is a method rather than a data value. The other is that each instance does not have its own copy of Instance Method. The implementation of such a method uses this keyword to refer to the object or instance on which it was invoked.

Both Instance Property and Instance Method can be accessed through an object instance only.

What happens when I add the following statement to the above example?

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

How does this affect rect1? Would this affect all other instances of Rectangle?

To answer these questions, it is necessary to understand the fundamental difference in the way Jscript treats reading and writing of properties.

When we try to read a property (e.g. area) of an object (e.g. rect1), JScript interpreter first checks if the property queried for is defined by rect1 object.

If it is not defined by rect1, then JScript interpreter checks whether the property is defined by rect1’s constructor’s prototype object.

If it is not defined by the constructor’s prototype then the interpreter can follow the prototype chain all the way up to Object object if necessary.

When we try to write (add) a property (as in the above e.g. area to rect1), JScript creates a new property (area) for that particular object (rect1) if no property with the same name is already created on it. So rect1 now has its own property area. JScript does not look up the prototype object when adding a property.

Going by the above explanation for reading a property, whenever rect1.area() is called, always the newly defined property (one on rect1) would be invoked and not the one defined on the prototype object.

However when we call rect2.area(), since area property is not defined by rect2, it will still call the one defined by its constructor’s prototype object.

Summarizing the above – A new property defined on an object overrides the property having same name defined on its prototype object but it does so only for itself. (rect1.area overrides Rectangle.prototype.area only for rect1.) No other instances of Rectangle get affected.

In the above e.g. I want to classify a rectangle as SMALL or BIG depending on its area. Any rectangle which has area less than 10, would be of type SMALL else BIG.

So I define a property:

Rectangle.MINBIGSIZE = 10;

MINBIGSIZE is a property created on the function constructor (Class) Rectangle and not on its instances or prototype object. This is an example of Class Property.

Class Property is a property that is associated with the Class itself and not the instance of the Class.

Irrespective of the number of instances created, there will always be one copy of the Class Property. This property is accessed through the class itself.

In order to figure out whether the rectangle is SMALL or BIG, I define a method type which will determine it.

Rectangle.type = function (obj) {

var retType;

obj.area()<Rectangle.MINBIGSIZE ? retType="SMALL" : retType="BIG";

return retype;

}

Just as MINBIGSIZE, type is created on the constructor function Rectangle. This is an example of Class Method. A Class Method is nothing but a function defined as a property of the Constructor. A Class Method is a method associated with the Class itself and not with an instance.

The above defined method can be called as shown below:

Rectangle.type(rect1); // would return BIG.

This completes the overview on Instance & Class properties / methods. In the next post, I will discuss data encapsulation and inheritance.

Hope this post was helpful and you enjoyed reading it!!

Thanks,

Ritesh

SDET, JScript Team.

Classes in Jscript - Part I

don.raman — Mon, 24 Sep 2007 11:23:00 GMT

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 constructor function 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