XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

Object-oriented JavaScript

June 07, 2006

JavaScript is not generally considered a robust programming language, especially when compared to languages such as Java or C#: it is interpreted, rather than compiled; it is dynamically, rather than statically, typed; and it is commonly considered a procedural, rather than an object-oriented, language.

However, the demands on JavaScript as a development platform are growing with the increasing popularity of so-called AJAX applications. The procedural development model commonly used to add basic client-side interactivity to web pages today will not scale to support the level of UI complexity required by these applications. Fortunately, and contrary to popular belief, it is possible to apply object-oriented (OO) design principles in JavaScript, which can help manage this complexity. The next several sections explain how.

Encapsulation

In OO programming, a class is used to define a type of object that will be used by an application. The type encapsulates the data used by the object and may optionally expose methods to allow callers (other objects) to interact with the data.

Because JavaScript is not a statically typed language, it does not provide a keyword for defining a class or object-type definition. Additionally, because JavaScript is not compiled, there would be no way to enforce the proper use of such types. However, it is still possible to define custom objects in JavaScript that behave, in many ways, like classes in C# or Java.

For example, in a C# program, we might define a class to represent a family pet as follows:

// C# Pet class

public class Pet
{
    private string name;

    public Pet(string name)
    {
        this.name = name;
    }

    public string GetName()
    {
        return name;
    }
}

Our program might create an instance of the Pet class and invoke the GetName() method as follows:

Pet p = new Pet("Max");
System.Console.WriteLine(p.GetName());

In JavaScript, we would define the Pet class as follows:

// JavaScript Pet class

function Pet(name) {
    this._name = name;
}

Pet.prototype._name;

Pet.prototype.getName = function() {
    return this._name;
}

Our JavaScript program (most likely a web page) could create an instance of Pet and invoke the getName() method as follows:

var p = new Pet("Max");
alert(p.getName());

The result of running the above JavaScript code should be an alert that looks like this:

Figure 1
Figure 1. JavaScript alert

The following list compares the JavaScript version to the C# version:

  • In C#, a constructor is defined using this syntax:

    public class Pet() { // ...

    In JavaScript, class constructors are defined as functions:

    function Pet(name) { ... }

    However, as in C#, class instances are created using the new keyword:

    var p = new Pet("Max");
  • Methods and properties in JavaScript are attached to a class via the prototype keyword. For example, the class defines a prototype property called _name that will contain the name of the Pet, and a prototype method named getName() that returns the value of _name.

    A complete description of prototype-based object modeling is beyond the scope of this article; suffice it to say that this is the recommended syntax for defining the properties and methods that your JavaScript class will expose.

  • Unlike C#, JavaScript properties and methods are untyped: the _name property is not declared as a string, and the getName() function is not declared to return a string. There is no compile-time check for proper type usage. The burden of ensuring proper type usage is placed entirely on the developer.

  • A JavaScript class must always refer to its own properties and methods using the this keyword; unlike Java or C#, JavaScript objects do not provide an implicit this scope.

  • JavaScript does not support any concept of method or property visibility: every property and method is always public. The developer is responsible for ensuring proper usage of a JavaScript class's members. As a result, it is a common convention to tag member variables that should be considered private with a leading underscore, as in the _name property in the example.

  • C# method names typically use the upper camel case naming convention, in which the first letter of each word is capitalized, including the first word; JavaScript (and Java) methods are commonly named using lower camel case, in which the first letter of every word except for the first is capitalized.

Pages: 1, 2, 3

Next Pagearrow