Developer

JavaScript supports object-oriented development

Java and JavaScript are unrelated, but they do share object-oriented development features. Learn more about object-oriented JavaScript in this article.


If you've worked with JavaScript programming, you may have wondered whether it includes any object-oriented (OO) constructs. In fact, JavaScript does support object-oriented constructs—to a degree. This article will work through a Scalable Vector Graphics (SVG) example to illustrate JavaScript's OO constructs.

How can I define methods and properties in classes?
A basic aspect of OO development is the use of classes with corresponding methods and/or properties. JavaScript supports the use of classes (with properties) via the function keyword. The following code defines a JavaScript class called Figure:
function Figure() {
this.centerX=0;
this.centerY=0;
this.area=0;
this.transform = transform; // methods are defined like this
function transform(moveX,moveY,angle) {
this.centerX += moveX;
this.centerY += moveY;
} }

The Figure class has three properties: centerX, centerY, and area. In addition, it has a method called transform(). The first three lines are constructors of the class.

But it doesn't resemble a class
You may be thinking that Figure() does not look like a class; it looks more like a JavaScript function. Why is Figure() a class definition?

Strictly speaking, the function Figure()  declaration is not a class definition, but it mimics one. It actually creates an object, and the code contained inside the curly braces is the constructor of this object. JavaScript object support is rudimentary and doesn't make a distinction between classes and objects.

This leads to the question of why function Figure() creates an object. An object is something that can hold properties and methods. Basically, since function Figure() contains both properties and methods, it is an object. In JavaScript, all functions are both objects and callable blocks of code. That's not as confusing as it sounds. To create an instance of the Figure() class/object, you just use the following syntax:
MyFigure = new Figure();

You call the Figure() function as a block of code, like this:
figValue = Figure();

The figValue variable is undefined because the Figure() block of code does not return a value. If you add return(this.area) as the last line of the function, figValue will have a value of 0. So figValue is of type number, and MyFigure is an instance of the Rectangle object.

Why are all the variables preceded by "this"?
The this keyword implies it is an instance variable of the object and can be accessed from outside the object using MyFigure.centerX. To make a variable private, remove the prefix this. The line this.transform = transform makes the method public. The method is called using MyFigure.transform(100,100,0).

Can there be a hierarchy of classes?
Another good question is whether JavaScript can contain a hierarchy of classes. The answer is a resounding yes. Let's take a closer look at how.

We can define a Rectangle child class with Figure as the parent class:
function Rectangle(startX, startY, endX, endY) {
this.width = endX - startX;
this.height = endY - startY;
this.centerX = (endX + startX)/2;
this.centerY = (endY + startY)/2;
this.computeArea = computeArea;
function computeArea() {
this.area = this.width*this.height;
} }
Rectangle.prototype = new Figure();

A Rectangle object is created with four arguments. The first four lines are the constructor. The Rectangle class contains a method: computeArea(). The last line, Rectangle.prototype = new Figure();, defines the Rectangle class as a child of, or as inheriting from, the Figure class.

Let me explain prototype. Every object constructor has the prototype property; it is used to add new properties and methods to all the objects. That's why prototype is used to accomplish inheritance: child.prototype = new parent();. All properties and methods of the parent object are added to the child object via prototype.

Note that this.centerX, this.centerY, and area are properties used in the Rectangle class, but they're properties of the parent class Figure. Similar to the Rectangle class, a Circle class can be defined as a prototype of the Figure class. The parent-child relationship can be as deep as you want; you can create another child of Rectangle.

How do I create an instance of a class?
It's easy to create a class instance (object) in JavaScript:
rect = new Rectangle(100,100,900,800);

This creates an object of type Rectangle. The constructor of Rectangle populates values for the properties width, height, centerX, and centerY. The value of the property rect.area is zero (0). The area method can be called using this command:
rect.computeArea();

The value of rect.area is now 560,000. The transform method is called using:
rect.transform(100,200,0);

Properties in parent or child object can be accessed like this:
var ar = rect.area;
var wi = rect.width;

Can I override properties and methods?
You can override properties and methods just as you do in Java. A property or method defined in the child class overrides the property or method in the parent class of the same name.

Interactions with global variables
JavaScript also supports the use of global variables. Check out the scope of the variable g_area in the following snippet:
<HTML>
<SCRIPT>
var g_area = 20;
function Figure() {

this.area=g_area;

}
function Rectangle(){ … }
Rectangle.prototype = new Figure();
function test(){
g_area = 40;
rect = new Rectangle();
alert(rect.area);
}
</SCRIPT>
<BODY onLoad = 'test()'/>
</BODY>
</HTML>

The value of rect.area is 20 (not 40 as you might expect) because the Rectangle is an object that is a prototype of the Figure object, and this relationship was defined before test() was called. To use the new value of g_area, you need to use the following:
function test() {
g_area = 40;
Rectangle.prototype = new Figure();
rect = new Rectangle();
alert(rect.area);
}

This will change the value of the area property for all new instances of Rectangle. Alternatively, you can use this approach:
function test() {
g_area = 40; 
rect = new Rectangle();
Rectangle.prototype.area = g_area;
alert(rect.area);
}

This changes the value of the area property for all existing and new instances of Rectangle.

Conclusion
JavaScript provides the necessary inheritance, encapsulation, and override properties to mimic OO development, although it doesn't support interfaces and method overloading. If you're new to OO development, give it a try. OO concepts allow developers to group a set of data and operations pertaining to them in an object. This is useful for managing browser events and managing SVG figures in a browser.

Editor's Picks