Object-Oriented JavaScript

By Cristian Darie, Bogdan Brinzarea



[This is an escerpt from the book, Microsoft AJAX Library Essentials: Client-side ASP.NET AJAX 1.0 Explained, by Cristian Darie, Bogdan Brinzarea. Published by Packt Publishing Ltd., 2007

In this chapter, you'll learn about OOP (Object-Oriented Programming) and how it relates to JavaScript. As an ASP.NET developer, you probably have some experience working with objects, and you may even be familiar with concepts such as inheritance. However, unless you're already an experienced JavaScript programmer, you probably aren't familiar with the way JavaScript objects and functions really work. This knowledge is necessary in order to understand how the Microsoft AJAX Library works, and this chapter will teach you the necessary foundations. More specifically, you will learn:

  • What encapsulation, inheritance, and polymorphism mean
  • How JavaScript functions work
  • How to use anonymous functions and closures
  • How to read a class diagram, and implement it using JavaScript code
  • How to work with JavaScript prototypes
  • How the execution context and scope affect the output of JavaScript functions
  • How to implement inheritance using closures and prototypes
  • What JSON is, and what a JSON structure looks like

In the next chapters you'll use this theory to work effectively with the Microsoft AJAX Library.

Concepts of Object-Oriented Programming

Most ASP.NET developers are familiar with the fundamental OOP principles because this knowledge is important when developing for the .NET development. Similarly, to develop client-side code using the Microsoft AJAX Library, you need to be familiar with JavaScript's OOP features. Although not particularly difficult, understanding these features can be a bit challenging at first, because JavaScript's OOP model is different than that of languages such as C#, VB.NET, C++, or Java.

JavaScript is an object-based language. Just as in C#, you can create objects, call their methods, pass them as parameters, and so on. You could see this clearly when working with the DOM, where you manipulated the HTML document through the methods and properties of the implicit documentobject. However, JavaScript isn't generally considered a fully object-oriented language because it lacks support for some features that you'd find in "real" OOP languages, or simply implements them differently.

Your most important goal for this chapter is to understand how to work with JavaScript objects. As an ASP.NET developer, we assume that you already know how OOP works with .NET languages, although advanced knowledge isn't necessary. A tutorial written by Cristian Darie on OOP development with C# can be downloaded in PDF format.

To ensure we start off from the same square, in the following couple of pages we'll review the essential OOP concepts as they apply in C# and other languages—objects, classes, encapsulation, inheritance, and polymorphism. Then we'll continue by "porting" this knowledge into the JavaScript realm.

Objects and Classes

What does "object-oriented programming" mean anyway? Basically, as the name suggests, OOP puts objects at the cent of the programming model. The object is probably the most important concept in the world of OOP—a self-contained entity that has state and behavior, just like a real-world object. Each object is an instance of a class (also called type), which defines the behavior that is shared by all its objects.

We often use objects and classes in our programs to represent real-world objects, and types (classes) of objects. For example, we can have classes like Car, Customer, Document, or Person, and objects such as myCar, johnsCar, or davesCar.

The concept is intuitive: the class represents the blueprint, or model, and objects are particular instances of that model. For example, all objects of type Car will have the same behavior—for example, the ability to change gear. However, each individual Car object may be in a different gear at any particular time—each object has its particular state. In programming, an object's state is described by its fields and properties, and its behavior is defined by its methods and events.

You've already worked with objects in the previous chapter. First, you've worked with the built-in documentobject. This is a default DOM object that represents the current page, and it allows you to alter the state of the page. However, you also learned how to create your own objects, when you created the xmlHttp object. In that case, xmlHttp is an object of the XMLHttpRequestclass. You could create more XMLHttpRequest objects, and all of them would have the same abilities (behavior), such as the ability to contact remote servers as you learned earlier, but each would have a different state. For example, each of them may be contacting a different server.

In OOP's world everything revolves around objects and classes, and OOP languages usually offer three specific features for manipulating them—encapsulation, inheritance, and polymorphism.

Page 1 of 3

1 2 3
Next Page

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.