"prototype" Property of the Constructor Function Object

JavaScript Tutorials - Herong's Tutorial Examples

∟"prototype" Property of the Constructor Function Object

This section provides a quick description of the built-in 'prototype' property on the constructor function. A tutorial example is provided on how to store properties and methods in the 'prototype' property to be inherited by all objects created by the constructor.

In previous sections, we learned that a constructor can be used to create new objects. But a constructor also carries a built-in property called "prototype", which provides the mechanism to allow objects to share and inherit properties and methods.

A constructor is also an object of the "Function" type.
A constructor can its own properties as an object.
Every constructor has a default property called "prototype".
The default "prototype" property of a constructor is an object.
New properties and methods can be added to the constructor's "prototype" object.
All properties and methods of the constructor's "prototype" object are shared by all objects created from this constructor.

Let's test this out using the following tutorial example:

<html>
<!-- Prototype_Property_on_Constructor.html
   Copyright (c) 2008 HerongYang.com. All Rights Reserved.
-->
<head>
<title>The "prototype" Property on the Constructor Function</title>
</head>
<body>
<pre>
<script type="text/javascript">

// Defining object type constructor function
function Book(title, author) {
   this.title = title;
   this.author = author;
}

   // Adding properties and methods to the "prototype"
   Book.prototype.price = 9.99;
   Book.prototype.getDesc = getDescription;

// Defining a function to be used as a method
function getDescription() {
   return "\""+this.title+"\" by "+this.author;
}
   
   // Creating an object of "Book"
   var myBook = new Book("JavaScript Tutorials", "Herong Yang");

   // Showing the object, constructor, and prototype
   showObject(myBook, "myBook");
   showObject(Book, "Book");
   showObject(Book.prototype, "Book.prototype");

function showObject(object, name) {
   document.writeln("\nShowing object \""+name+"\"");
   document.writeln("   Type: "+(typeof object));
   document.writeln("   Property/method names and values:");
   for (var item in object) {
      document.writeln("      "+item+": "+object[item]);
   }
}
</script>
</pre>
</body>
</html>

The output of this tutorial example shows that how the properties and methods of the "prototype" are inherited by the object:

Showing object "myBook"
   Type: object
   Property/method names and values:
      title: JavaScript Tutorials
      author: Herong Yang
      price: 9.99
      getDesc: function getDescription() {
    return "\"" + this.title + "\" by " + this.author;
}

Showing object "Book"
   Type: function
   Property/method names and values:
      prototype: [object Object]

Showing object "Book.prototype"
   Type: object
   Property/method names and values:
      price: 9.99
      getDesc: function getDescription() {
    return "\"" + this.title + "\" by " + this.author;
}