Availability

Navigator 3.0, Internet Explorer 3.0

Description

The prototype property of a function is only useful when the function is used as a constructor function. It refers to an object, which is initially empty--i.e., has no properties or methods defined.

The prototype object serves as a prototype for an entire class of objects. This is because any objects created through a constructor function will "inherit" the properties and methods defined in that prototype. This "inheritance" is done in a way that does not consume any memory in the inheriting object. When you use a property or invoke a method in the context of an inheriting object, the object's own properties and methods are first checked. If the property or method you specified is not found there, JavaScript then checks the properties and methods of the prototype object. This means that when you add properties to a prototype object, those properties will immediately appear to have been added to any existing instances of the corresponding object type.

Note that prototypes are not shared across windows. If you add a method to the String.prototype object in one window, then all strings in that window will have access to this new method. Strings defined in other windows, however, will not see the new method.

In Navigator 3.0, a prototype object is not created for a constructor function until the constructor is used to create an object for the first time. Thus, in Navigator 3.0, you must create and discard a dummy object with a constructor function before you can assign values to the constructor's prototype object. This is not necessary in Internet Explorer 3.0.

The title of this page is "Function.prototype". Note that there are two possible meanings for this title. The first, and the intended one, is that this page documents the prototype property shared by all Function objects. But note that all constructor functions have a prototype property and Function() is a constructor function. Therefore, this page could also be documenting the prototype property of the Function() constructor. In a sense it is: you can add new properties or methods to all JavaScript Function objects by setting those properties and methods in the Function.prototype object.

Usage

Prototypes are one of the main techniques for defining the features of an object type or "class" in JavaScript. They are particularly useful in providing methods and constants for use with a whole class of objects. They are also useful for defining properties with default values which individual objects may optionally override.

The prototype object can also be used to add new properties or methods to many predefined JavaScript object types as well, as the example below shows.

Example

The following code shows how you could add a new method to the String object type by specifying the method on the prototype object:

// Define a function
function String_output(d) { d.write(this); }
// Set it as a method in the String.prototype object
String.prototype.output = String_output;
// Use it like this
"Hello World!".output(document);

As another example, consider the Window object. It has a top property that refers to the top-level web browser window. Suppose you wanted all objects in your JavaScript application to contain a reference to this top-level window. You could implement this with a single line of code:

Object.prototype.top = self.top;

After executing this code, any JavaScript object (all current and future objects) that does not already have a top property will now have one, and it will refer to the top-level window self.top.

Bugs

Navigator 3.0 requires a constructor to be used once before anything can be assigned to its prototype object. Internet Explorer 3.0 does not allow primitive strings to use methods or properties defined in String.prototype. Similarly, Internet Explorer 3.0 does not support prototype objects for the Boolean, Number, and Function objects.

See Also

Chapter 7, Objects