"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.

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

<html>
<!-- Prototype_Property_on_Constructor.html
   Copyright (c) 2013 by Dr. Herong Yang, herongyang.com
-->
<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;
}

Table of Contents

 About This Book

 Introduction to JavaScript

 ECMAScript Language Specification and JavaScript Dialects

 Data Types, Variables and Expressions

 Flow Control Statements

 Creating, Accessing, and Manipulating Arrays

 Defining and Calling Functions

 Web Browser Supporting JavaScript

 Server-Side and Client-Side Web Scripting

 Introduction to Objects

Defining Your Own Object Types

 Prototype-Dased Object-Oriented Programming Style

 Prototype-Based Programming Features in JavaScript

 Defining Object Constructor Functions

 Adding Properties and Methods to Objects

 "for ... in" and "for each ... in" Statements

"prototype" Property of the Constructor Function Object

 "instanceof" Operator - Determining Object Type

 "typeof" Operator and Data Types

 Inheritance of Properties and Methods through the Prototype Object Chain

 'jrunscript' - JavaScript Shell Command from JDK

 Using Functions as "Function" Objects

 Introduction to Built-in Object Types

 W3C's Document Object Model (DOM) Specifications

 References

 PDF Printing Version