Nadine is an independent contractor and a Sun Certified Java Programmer. She can be contacted at [email protected].
Because JavaScript is not strongly typed and does not support class-based inheritance, it is easy to dismiss it as not being an object-oriented language. In truth, JavaScript is an object-oriented language that utilizes prototype-based inheritance rather than class-based inheritance
In addition to its inheritance capabilities, JavaScript has other, albeit underused, object-oriented strengths such as encapsulation. The concept of encapsulation (that is, making an object's data members private and manipulating that data using methods) can be easily transferred to JavaScript. Just as a typical Java class has a constructor, member variables, and methods, this class structure can be mirrored with JavaScript. This is done by what is known in JavaScript as a "nested function" — a function that houses one or many inner functions.
function OuterMost() {...function nested() {...} ...}
JavaScript refers to nested functions in this context as "methods." For simplicity, I refer to the outermost function as a class. Listing One is an example of a JavaScript class called MyClassName. While the syntax is notably different, the underlying structure achieves the same end goal: encapsulation.
In Java, there is a special kind of method called a "constructor," whose primary purpose is to allocate storage for the object and assign initial values to its properties. In JavaScript, a constructor also exists and even works in the same way, but is not as obvious when examining the language syntax. This is because JavaScript does not contain a formal constructor. Instead, the outermost function serves as a constructor. Consequently, it makes sense to place all initialization code after the property declarations (as in Listing One).
Following the property declarations and object initializations are the method pointers. To handle scoping issues between the outermost function and its nested functions, method pointers are used. Bridging this scoping gap, in turn, lets the method have public access. For every nested function that will have public access, a corresponding method pointer must exist (as in Listing One). Omitting the method pointer will make the method private. This comes in handy and is an important feature of encapsulation. Also, for scoping reasons, the object properties are intentionally not preceded by the keyword this. Omitting the keyword allows them to remain private. Using the this keyword only serves to make the object property public, thereby defying encapsulation.
Listing Two shows how to create an object instance and call its methods. The HTML script tag's src attribute (line 3 of Listing Two) is used to include the contents of myclassname.js (see Listing One) into the HTML file. The rest of the code should look familiar since it closely parallels object creation and method access in Java. This approach is ideal when creating JavaScript widgets. But don't stop there, JavaScript also pairs well with many design patterns. So why hasn't this been available since the onset of JavaScript? The answer is that nested functions have only been around since JavaScript 1.2.
Adopting this approach makes code easier to read, more maintainable, and achieves better reuse. In addition, developers coming from an OO background will find the transition to JavaScript smoother. Be conservative, however, because this approach can also slow things down when used excessively.
Some final words. The ECMAScript specification, to which JavaScript must conform, lists future reserved keywords for proposed extensions. Among them are: class, import, super, and extends. Sound familiar? A glimpse of tomorrow hints that JavaScript may become even more Java-like.
DDJ
Listing One
/* myclassname.js */
function MyClassName(parameterA, parameterB)
{
// --- Object Properties ---
propertyR = "propertyR is read only.";
// --- Object Initialization ---
propertyA = parameterA;
propertyB = parameterB;
// --- Method Pointers ---
this.getPropertyA = _getPropertyA;
this.setPropertyA = _setPropertyA;
this.getPropertyB = _getPropertyB;
this.setPropertyB = _setPropertyB;
this.getPropertyR = _getPropertyR;
this.doSomeAction1 = _doSomeAction1;
// --- Methods ---
function _getPropertyA()
{
return propertyA;
}
function _setPropertyA(para)
{
propertyA = para;
}
function _getPropertyB()
{
return propertyB;
}
function _setPropertyB(para)
{
propertyB = para;
}
function _getPropertyR()
{
return propertyR;
}
function _doSomeAction1()
{
alert(aPrivateMethod() + " " + this.getPropertyR());
}
function aPrivateMethod()
{
return "aPrivateMethod() is a private method.";
}
}
Listing Two
<html>
<head>
<script src="myclassname.js" language="JavaScript"></script>
<script language="JavaScript">
// object declaration and instantiation
var objMyClassName = null;
objMyClassName = new MyClassName("A", "B");
// accessing the newly created objects methods
alert(objMyClassName.getPropertyA()); // Displays "A"
alert(objMyClassName.getPropertyB()); // Displays "B"
objMyClassName.setPropertyA("Y");
objMyClassName.setPropertyB("Z");
alert(objMyClassName.getPropertyA()); // Displays "Y"
alert(objMyClassName.getPropertyB()); // Displays "Z"
// Displays aPrivateMethod() is a private method. propertyR is read only.
objMyClassName.doSomeAction1();
// Displays Undefined - propertyB is private
alert(objMyClassName.propertyB);
// Fails, aPrivateMethod() is private. Netscape quietly bombs.
alert(objMyClassName.aPrivateMethod());
</script>
</head>
<body>
<!-- body tags here -->
</body>
</html>
