Share via

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

  • Article

 

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 issimilar toInstance 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.

Comments

  • Anonymous
    September 30, 2007
    PingBack from http://www.artofbam.com/wordpress/?p=4007

  • Anonymous
    October 14, 2007
    【原文地址】ClassesinJScript

  • Anonymous
    October 15, 2007
    ref http://www.handandaily.com

  • Anonymous
    October 30, 2007
    cleaner class method: Rectangle.type = function (obj) {  return obj.area()<Rectangle.MINBIGSIZE ? "SMALL" : "BIG"; }

  • Anonymous
    October 30, 2007
    In this post I will be discussing how one can achieve Class Hierarchy and Data Encapsulation in JScript

  • Anonymous
    October 30, 2007
    In this post I will be discussing how one can achieve Class Hierarchy and Data Encapsulation in JScript

  • Anonymous
    November 07, 2007
    Here is a series of posts on “Classes in JScript” written by Ritesh from the JScript team at MS: Classes

  • Anonymous
    November 11, 2007
    Since we release JSript intellisense in Visual Studio 2008 Beta 2, there has been some queries on why

  • Anonymous
    January 19, 2008
    In this post I will be discussing how one can achieve Class Hierarchy and Data Encapsulation in JScript

  • Anonymous
    January 19, 2008
    Since we release JSript intellisense in Visual Studio 2008 Beta 2, there has been some queries on why

  • Anonymous
    January 19, 2008
    cleaner class method: Rectangle.type = function (obj) { return obj.area()<Rectangle.MINBIGSIZE ? "SMALL" : "BIG"; }

  • Anonymous
    January 19, 2008
    cleaner class method: Rectangle.type = function (obj) { return obj.area()<Rectangle.MINBIGSIZE ? "SMALL" : "BIG"; } cleaner class method: Rectangle.type = function (obj) { return obj.area()<Rectangle.MINBIGSIZE ? "SMALL" : "BIG"; }

  • Anonymous
    January 19, 2008
    cleaner class method: Rectangle.type = function (obj) { return obj.area()<Rectangle.MINBIGSIZE ? "SMALL" : "BIG"; }