Section 11.1. The JavaScript Object and Prototyping | Learning JavaScript, 2nd Edition

11.1. The JavaScript Object and Prototyping

An object in JavaScript is a complex construct usually consisting of a constructor as well as zero or more methods and/or properties. Additionally, all objects in JavaScript derive functionality from the standard JavaScript Object.

The Object itself is not particularly interesting. Originally it had several methods that have gradually been pulled out as global functionssuch as eval, used earlier in this bookrather than Object methods.

What Object does provide is the framework for creating new objects; however, it doesn't do so via traditional object-oriented inheritance and the concept of classes. Instead, JavaScript derives its OO functionality from a concept called prototyping.

11.1.1. Prototyping

In a language such as Java or C++, to create a class as an extension of another, you define it in such a way that it inherits from the higher-level object. You then add your own functionality in addition to overriding any inherited functionality.

JavaScript, on the other hand, provides for a constructor, via Object, that allows developers to construct new objects. It is the Object constructor that then allocates the memory for the object, including all of its properties. The Object also provides a prototype property, which enables you to extend any object, including the built-in ones such as String and Number. It is this prototype that's used to derive new object methods and propertiesnot class inheritance.

This concept of extending objects via prototyping is best explained with an example. Example 11-1 demonstrates how to extend the built-in String object using the underlying Object prototype property, and then create an instance using the String constructor. The extension trim method trims leading and trailing whitespace from the string.

Example 11-1. First looks at JavaScript object creation and prototyping

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Adding trim function to String</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> //<![CDATA[ String.prototype.trim = function(  ) { return (this.replace(/^[\s\xA0]+/, "").replace(/[\s\xA0]+$/, "")); } var sObj = new String("  This is the string   "); sTxt = sObj.trim(  ); document.writeln("--" + sTxt + "--"); //]]> </script> </body> </html>

Though browsers strip repeating spaces when a page is rendered, at least one space should have remained if all of them hadn't been trimmed.

With the prototype property, any use of String within the page or pages using this library now has access to this new trim function in addition to the older String object's methods and properties. We haven't created a new object class that's inherited from another, so much as we've taken an existing object and extended its functionality. That's the basic difference between a class-based OO system and one that uses prototyping.

Instead of using prototype, I could have added the trim function directly to a string instance (variable):

var str = " this is a string "; str.trim = function(  ) ...

However, only the instance would have access to the function, and I want to extend the actual String object itself; hence, the use of prototype. Every object in JavaScript, including those you create yourself, has a prototype property that allows the object to be extended.

How does the prototype work when the method is accessed? When the method is invoked on the object, the JavaScript engine first looks among those associated with the initial object implementation. If not found, it then looks within the prototype collection to see if the property/method exists. Only if the property or method is not found in the global object as part of the basic object or via the prototype collection, does the engine search for it locally, attached to the variable.

Of course, extending an existing object is only so helpful. Eventually, as you create increasingly sophisticated JavaScript applications, you're going to want to package your code into reusable components. The next section covers creating your own custom JavaScript objects and building reusable libraries.