Section 11.2. Creating Your Own Custom JavaScript Objects


11.2. Creating Your Own Custom JavaScript Objects

In the last few chapters of the book, which cover Ajax and the various code libraries you can download, you'll see how much improvisation was used to create objects using JavaScript. At times, these libraries look almost as if they're built in a language other than JS. In fact, many were built specifically to overlay the JavaScript language with other language characteristics, which has both advantages and disadvantages.

An advantage is that the library provides shortcuts for some of the more tedious operations, such as accessing page elements. Laying another language's flavor over JS may also make it easier if you use this language as the server-side component in an Ajax application.

The disadvantage is that this effort obfuscates the underlying JavaScript, making the library hard to read, hard to use, and confusing if you're not necessarily up on all the latest language advances.

One of the best essays I've seen written on the ambivalence associated with some of the clever and powerful, but obscuring, component libraries is "Painless JavaScript Using Prototype" by Dan Webb at Sitepoint (at http://www.sitepoint.com/article/painless-javascript-prototype).

JavaScript-library developers just can't seem to keep from trying to make JavaScript act like another language. The Mochikit guys want JavaScript to be Python, countless programmers have tried to make JavaScript like Java, and Prototype tries to make it like Ruby. Prototype makes extensions to the core of JavaScript that can (if you choose to use them) have a dramatic effect on your approach to coding JavaScript. Depending on your background and the way your brain works, this may or may not be helpful.


We'll get into the "make JavaScript be something else" approach to components and development later, but in this chapter, I'm focusing on how to make JavaScript work like JavaScript, but in a nice way.

Returning to the topic of creating objects, we find an old friendthe functionat the heart of the capability. It is the JavaScript function that's at the core when creating new objects.

11.2.1. Enter the Function

For close to a decade, when you created a custom object in JavaScript, you used functions. There have been some changes in how the functions are written, how private and public properties are defined, and even how those properties are packaged, but fundamentally if you want to create a new custom object in JavaScript, you start with the function.

In Example 11-2, JavaScript creates a very simple object, Tune, which takes one parameter, a song title. This is assigned to an object property, title. The object also incorporates an array of performers, which can be manipulated via two methods: addPerformer (which takes a string), and listPerformers, which takes no parameters.

Example 11-2. Creating a custom object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>First Object</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ var Tune = function(title) {    this.title = title;    var performedBy = new Array(  );    this.addPerformer = function (performer) {       var i = performedBy.length;       performedBy[i] = performer;    }    this.listPerformers = function(  ) {       var singers = "";       for (var i = 0; i < performedBy.length; i++ ) {          singers += performedBy[i] + " ";       }       alert(singers);    } } var song = new Tune("Hello"); song.addPerformer("Me"); song.addPerformer("You"); song.addPerformer("Us"); song.listPerformers(  ); alert(song.title); //]]> </script> </head> <body> </body> </html>

In the page, an instance of Tune is created using the Object constructor, passing in a song title, "Hello." The addPerformer method is called three times, passing in three performers: Me, You, and Us. The listPerformers method is then called to print out the performers and then the song title.

Going into greater detail, in the script I first create a function with the same name as the object, Tune. Remember from past chapters that all functions in JavaScript are also objects, so by creating this function we are, in effect, creating our custom object.

Within the function there are two properties and two methods. In this example, the code blocks to implement both methods are included as part of the object declaration. However, it doesn't have to be done this way. A set of objects I've used for years to manage my cross-browser DHTML efforts sets each object's properties to a method, which is then implemented outside the object constructor function:

function someObject(  ) {    this.method1 = objMethod1;    ... } function objMethod1(  ) { ... }

A good reason for using this approach is to make the code easier to read. You could also attach the same method to different objects, though a better approach might be to use a form of JavaScript inheritance called chaining constructors (discussed later in the chapter).

Another approach to creating a custom object is to create an instance of the object, and then use the object's prototype to assign both properties and methods. Example 11-3 demonstrates this with a variation on the Tune object, but this time I'm using a prototype to assign a function to an object method.

Example 11-3. Using a prototype to assign properties and/or methods

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Second Object</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function Tune (title) {    this.title = title; } function printTitle(  ) {    alert(this.title); } var someTune = new Tune("Title"); Tune.prototype.print = printTitle; var anotherTune = new Tune("Another Title"); anotherTune.print(  ); //]]> </script> </head> <body> </body> </html>

The object has to be instantiated at least once in order for the JavaScript engine to generate the prototype on the new object. Once instantiated, though, it's just as usable, and in the same manner (as was demonstrated with the String object).

Though perfectly acceptable, I'm not fond of using prototypes when I control how a custom object is derived. To me, it unnecessarily adds to the complexity of the object, as well as decreases its readability. They are, however, very handy as a way to extend objects defined elsewhereincluding JavaScript's own basic set of objects.


The use of this associated with the title was demonstrated in both examples. It was also used with the methods in the first example, but not with the song array. The use of this signals a difference between a public and a private member within a JavaScript object, discussed next.

11.2.2. Public and Private Properties and Where this Enters the Picture

In Example 11-2, the this keyword is used to assign the value to the property of the object. It acts as a reference to the parent object, which is an instance of the new object we're creating. What this does (literally) is create a public property that is accessible outside the object, as was demonstrated when we printed the song title:

alert(song.title);

The use of this is also associated with the two methods. The array, though, is not assigned to the object using this; instead, it's created using the variable keyword var. This fact makes the property a private oneaccessible internally to the object (including to its methods) but not outside of the object. Why have private rather than public variables? Primarily for data hidingprotecting data from direct application access.

There are times when you don't want application developers to directly access object data. They may end up making the object unusable or inadvertently cause an unwanted side effect. Usually you'll provide methods to get and set this data, rather than have it accessible as a property. To hide such data in JavaScript, you create it as a private member, with var, rather than a public member, with this.

The examples so far have passed basic JavaScript objects (Strings) as parameters. You can also use custom objects to wrap existing page elements in a form of encapsulationan effective way to deal with browser differences. The next section covers this JavaScript object encapsulation, as well as cross-browser objects. We'll also look at how to detect when a certain functionality is supported or not.




Learning JavaScript
Learning JavaScript, 2nd Edition
ISBN: 0596521871
EAN: 2147483647
Year: 2006
Pages: 151

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net