Classes in Jscript - Part I

 

 

Sent to you by Hudong via Google Reader:

 

 

Classes in Jscript - Part I

via MSDN Blogs by don.raman on 9/24/07

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?

Yes, JScript is object oriented. All object oriented languages allow us to define a Class and then create individual objects that are instances of that Class. So does JScript allow us to define Classes and create instances?

Yes it does, but it 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. It usually does not have a return value but is allowed to return an object value which becomes the value of the new expression.

Prototype objects:

In JScript, every object includes an internal reference to another object called as its prototype object. 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 * r)bj.width;

}

Call the function to compute area.

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

But this is not object-oriented in it's 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, they are not allowed to modify any. 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. Hence none of the objects are allowed to modify the properties defined on the prototype object.

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

 

 

Things you can do from here:

• Visit the original item
  on MSDN Blogs
• Subscribe to MSDN Blogs using Google Reader
• Get started using Google Reader to easily keep up with all your favorite sites