JavaScript is most commonly used for client-side Web programming. You can use JavaScript for other things, for example, it is used with Visual Studio Add-Ins and wizards, but generally we think of JavaScript as a Web technology. JavaScript is syntactically pretty close to the C programming language, but JavaScript is object based. JavaScript supports functions, data, and objects, and you can implement your own classes. You can dynamically define an object and add properties to JavaScript objects simple by referring to the property as a member. You can also statically define a class (at design and add fields, properties, and functions) and then create instances of that class and interact with those members in your code. Obviously the reason for defining JavaScript classes is valid for the same reason you define VB or C# classes; classes help manage state and organize your code.
Dynamically Defining Object Properties and Functions
You can add properties and functions on the fly. By literally creating an instance of the Object type and using the member of (. operator) syntax the name on the right side of the dot operator becomes a dynamic member. For example, if you instantiate a variable named Person as a type of Object and refer to a property then the property exists. Here is an example:
var Person = new Object();
Person.FirstName = “Paul”;
(Its sort of weird, but) by referring to FirstName it becomes a bonafide property of Person. You can use the same approach to dynamically assign a function to Person too. Suppose for example you have a function Print—Print will just display the alert dialog. You can make Print a member of Person by assigning the function Print to a dynamically used member function. Listing 1 contains a block of script that dynamically adds properties and a function Print to object Person. Notice that the Print function can use the reference-to-self object this to access FirstName and LastName because Person.Print = Print makes the Print function a member of Person. (You can use the QuickWatch window to see that this refers to Person and shows the members FirstName, LastName, and Print.
Listing 1: A dynamic class is created by simply using names as if they were statically defined as members of the class.
<script type="text/javascript">
var Person = new Object();
Person.FirstName = "Paul";
Person.LastName = "Kimmel";
Person.Print = Print;
Person.Print();
function Print() {
debugger;
alert(this.FirstName + ' ' + this.LastName);
}
</script>
Figure 1: Use the QuickWatch when the debugger statement is hit to see that this refers to Person and Person contains the dynamically used members.
Dynamically adding properties is a useful technique for returning data from a modal dialog. In script window.showModalDialog returns a single value. The way to return multiple values is to dynamically create a composite value—a dynamic object—and return the composite value. For example, if a modal dialog supported editing properties like first and last name then you could return the Person object from the showModalDialog function.
Defining JavaScript Classes
You can statically define JavaScript classes. The notation for a statically defined class is the function notation. (The outer function is treated as the constructor function.) The difference between a function and a class exists when a function contains nested properties and functions. Then, the function implicitly is playing the role of a class. For example, to retrofit the code in Listing 1 to a class rework the code as shown in Listing 2.
Listing 2: A Person class; classes in JavaScript use the function notation.
function Person() {
this.FirstName = “”;
this.LastName = “”;
this.Print = print;
function print() {
debugger;
alert(this.FirstName + ' ' + this.LastName);
}
}
By declaring this.FirstName and this.LastName and initializing them they become part of the Person class. The statement this.Print assigned to print (note the case difference) then the print function is accessible. Listing 3 demonstrates how to create an instance of the Person object, assign values to the properties, and invoke the function. If you place a debugger statement right after the var aPerson statement and use the QuickWatch you will see that the Person object contains FirstName, LastName, and Print.
Listing 3: Using the Person class.
var aPerson = new Person();
aPerson.FirstName = "Paul";
aPerson.LastName = "Kimmel";
aPerson.Print();
JavaScript OO is a little awkward if you compare it to a more fully developed OO language like C#. Using a property makes it a member, adding a function and assigning it to a name makes it an accessible member, and the wonkiest bit of all is the constructor function as class. The upside is that writing code like this will help you organize your JavaScript, maintain state, and promote reusable code and good housekeeping.