How to Use the JavaScript Prototype Property - dummies

How to Use the JavaScript Prototype Property

By John Paul Mueller

It’s hard to figure out precisely how to use the prototype property, like many other properties provided by a JavaScript class. The documentation tells you what task the property performs, but examples of actually using the property are scarce (or possibly non-existent).

There are many examples of using this property to modify the behavior of classes you create, but few examples of using it with built-in classes such as String. The String class does support the prototype property (see w3schools for details), as do most other built-in classes.

The odd thing is that there is just a little trick you need to know to use the prototype property, just as there are little tricks for many seemingly hard programming techniques. In this case, make sure that you make any modifications to String before you use it to perform work in your application.

Here’s the complete code for a page that modifies String by adding a new method, getFiveLetters(), and then uses that method when a user clicks a button on the page:

<!DOCTYPE html>
   <title>Using the Prototype Method</title>
   <script type="text/javascript">
      // Use the prototype function to add
      // features to the String type.
      String.prototype.getFiveLetters =
         function ()
            return this.substring(0, 5);
      function UsePrototype()
         // Create an object based on String.
         var UseString =
            new String("Hello There!");
         // The new function is immediately
         // available for use.
   <h1>Using the Prototype Method</h1>
   <input type="button"
          value="Use Prototype"
          onclick="UsePrototype()" />

Yes, this example modifies the String class, but only within this file. You use the String.prototype property to create a new member, getFiveLetters, and assign an anonymous method to it as shown. The method returns a substring consisting of the first five letters of whatever string the resulting object contains. Of course, you can create properties and methods to meet any need by using this technique.

The application calls the test method, UsePrototype(), whenever the user clicks Use Prototype. All that this method does is create a new String, just as you normally would. The new String, UseString, automatically has access to getFiveLetters() as shown. This is an interesting technique that relies on a little trick, placing the new function first in the file, to change an existing class.

Use this technique with caution. The change you make affects only the current file (or group of files if you make the change as part of a library). It could also introduce compatibility issues. Changing an existing method or property will almost certainly confuse any developer that comes after you.

You want to use this technique in a responsible way to add functionality to existing classes, not make drastic changes to those classes.