Most developers are used to writing simple functions in JavaScript, but JavaScript is also an object-based language that lends itself well to polymorphism and design patterns. Everything in JavaScript exists as an object, including functions, and these JavaScript objects are loosely typed and can be extended at run time. Instead of an inheritance based on class definitions, JavaScript objects inherit their behaviors through prototypes, and they can also be assigned behaviors at run time. To create an object in JavaScript, the function keyword is used to create an object constructor, which is called with the new keyword to create an object instance. Understanding the inheritance model of JavaScript is vital to implementing effective JavaScript libraries.

Important

In JavaScript, objects inherit behavior, and behavior is assigned through a prototype or at run time after the object is instantiated.

In the following code, the function DataItem forms the class definition for the item object that is instantiated in the pageLoad function.

function DataItem(content){
    this._content = content;
}

function pageLoad() {
    var item = new DataItem('Hello world!'),
}

Tip

In JavaScript, method and class definitions are both defined with function, so it’s important to use naming semantics that clearly identify what is a class definition and what is a function definition. The Microsoft standard for JavaScript class libraries is to use Pascal casing for class definitions (MyClass) and camel casing for method definitions (myMethod).

JavaScript’s type system is duck typed, which means that the object is defined by its behavior: if it walks like a duck, swims like a duck, and flies like a duck, it probably is a duck. Because of its duck-typed nature, JavaScript doesn’t require a class-based model of strong types. Likewise, formal interfaces aren’t required because there isn’t a need for explicit or implicit casting. Instead of working with inheritance hierarchies to build type libraries, JavaScript uses a model in which a prototype is used to assign common behavior to the type.

A JavaScript prototype is much like a class definition you write in C#, although a prototype is more flexible because it is not a static declaration, can be assigned to multiple types, and can assign unrelated behavior. All instances of a type inherit the behavior assigned to the prototype. For example, to implement the property content, you can implement get and set functions in the prototype as the following code demonstrates:

DataItem.prototype = {
    get_content : function(){return this._content;},
    set_content: function(){this._content = value;}
}

Tip

Properties in JavaScript are implemented and accessed through get_ and set_ methods. This convention is common throughout the Microsoft AJAX Library.

As the preceding code sample demonstrates, prototype syntax is expressed with JavaScript-serialized object notation using colon-delimited name-value pairs. Commas rather than semicolons are used to separate function definitions, and colons are used to assign a function to a field. A function can be defined inline in a prototype, or a prototype can be used to assign an existing function to the instance method, as the following prototype demonstrates with the method DataItem$GetWikiMarkup, which is assigned to the instance method getWikiMarkup.

DataItem.prototype = {
    get_Content : function(){return this._content;},
    set_Content: function(){this._content = value;},
    getWikiMarkup : DataItem$GetWikiMarkup
}

function DataItem$GetWikiMarkup(){
    return ConvertToWiki(this._content);
}

function ConvertToWiki(htmlMarkup){
    // implementation of wiki converter
}

An alternative syntax can be used to assign the getWikiMarkup function to the prototype after the prototype definition. Using this approach, you can extend existing frameworks without modifying the source code. The following code demonstrates the assignment of getWikiMarkup to the prototype:

DataItem.prototype.getWikiMarkup = DataItem$GetWikiMarkup;