JavaScript: Property Key "prototype"

By Xah Lee. Date: . Last updated: .

In JavaScript, every function ( except arrow function 〔►see JavaScript: Arrow Function〕 ) has a magical property key "prototype".

// every function has a property key "prototype"

// standard function objects
console.log ( Function.hasOwnProperty ( "prototype" ) ); // true
console.log ( Array.hasOwnProperty ( "prototype" ) ); // true
console.log ( Object.hasOwnProperty ( "prototype" ) ); // true
console.log ( Date.hasOwnProperty ( "prototype" ) ); // true

// user-defined function
console.log( (function () {}).hasOwnProperty("prototype") ); // true

〔►see JavaScript: Property Overview

Value of Prototype Property is Not Prototype Object

The value of a property key "prototype" of object X is NOT the prototype (aka parent) of object X, in general.

Let's review the JavaScript's concept of prototype object here.

In JavaScript, there's “prototype” of a object. (more easily understood as the “parent” of a object. The significance of this parent object is that, property lookup will go thru the parents. This is “inheritance”.)

The way JavaScript finds a object's parent is implemented as a “Internal Slot”, usually denoted as “[[prototype]]”. The value of a object x's internal slot [[prototype]] is a object y (or null), and this y is the parent of x. (“Internal Slot” is JavaScript implementation detail.)

So, the following are equivalent statements:

〔►see JavaScript: Prototype and Inheritance

Where Does the Prototype Property Came From?

Every function has a property key "prototype", by spec. ECMAScript 2015 §ECMAScript Language: Functions and Classes#sec-function-definitions-runtime-semantics-evaluation

What's the Property Key "prototype" For?

The property key "prototype" is a mechanism for object created using new F() to link to a parent, where the F is a user-defined constructor.

You can set a function F's prototype property F.prototype = obj; before calling new F();, so that the newly created object's parent will be obj.

When a function is called with new F(), and if the function does not have return statement or returns a value that's not a object data type 〔►see JavaScript: What's Object?〕 , then, the parent of the newly created object, is the value of F.prototype, at the time new F() is called.

// ff.prototype is parent of 「new ff()」, at time of call of 「new ff()」

function ff () {};

var x = new ff();

console.log(
    Object.getPrototypeOf(x) === ff.prototype
); // true

// note: provided ff does not return a object in definition

Note: there are other ways to create a object with a specific parent, such as Object.create(). 〔►see JavaScript: How to Create Object with Parent X?

〔►see JavaScript: Operator “new”

Default Values of Prototype Property of User-Defined Functions

For user-defined function f, the value of f.prototype by default is a newly created object {"constructor":f} (that is, a newly created object, with only one property key, this property key is named "constructor", and value of property key "constructor" is the function itself. The parent of this newly created object, is Object.prototype). ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-makeconstructor

// every function has a property key "prototype"
function FF() {};
 console.log ( FF.hasOwnProperty("prototype")
); // true

// its value is a object, with just 1 property
console.log (
 Object.getOwnPropertyNames(FF.prototype).length === 1
); // true

// the property key is "constructor"
console.log (
 FF.prototype.hasOwnProperty ( "constructor" )
); // true

// the value of the property key "constructor" is the function
console.log ( FF.prototype.constructor === FF ); // true

// show its attributes
console.log (
 Object.getOwnPropertyDescriptor( FF.prototype, "constructor" )
);
// { value: [Function: FF],
//   writable: true,
//   enumerable: false,
//   configurable: true }

// show its parent
console.log ( Object.getPrototypeOf ( FF.prototype ) === Object.prototype ); // true

〔►see JavaScript: Property Key "constructor"

Builtin Function's Value of Property Key "prototype"

For any JavaScript's buildin constructor B, the value of B.prototype is a object, and the only way to express that object is just via the “prototype” property access, that is B.prototype.

For example:

And, just like user-defined function, the following is true:

For any JavaScript's buildin constructor B, the parent of new B(…) is always B.prototype. Because the value B.prototype can never change.

console.log (
 Object.getPrototypeOf ( new Object() ) === Object.prototype
); // true

console.log (
 Object.getPrototypeOf ( new Function() ) === Function.prototype
); // true

console.log (
 Object.getPrototypeOf ( new Array() ) === Array.prototype
); // true

console.log (
 Object.getPrototypeOf ( new Date() ) === Date.prototype
); // true

console.log (
 Object.getPrototypeOf ( new RegExp() ) === RegExp.prototype
); // true

Buildin constructor's prototype property cannot be changed.

// builtin constructor's prototype property cannot be changed
"use strict";

Array.prototype = {};

// Array.prototype = {};
//                 ^

// TypeError: Cannot assign to read only property 'prototype' of function Array() { [native code] }

Builtin constructor's prototype property cannot be changed, because its writable attribute is false.

// builtin constructor's prototype property cannot be changed, because its writable attribute is false
console.log(
    Object.getOwnPropertyDescriptor(Array, "prototype")
 );

// prints
// { value: [],
//   writable: false,
//   enumerable: false,
//   configurable: false }

〔►see JavaScript: Property Attributes

JS Constructor Topic

  1. JavaScript: Keyword “this”
  2. JavaScript: What's Constructor?
  3. JavaScript: Property Key "prototype"
  4. JavaScript: Operator “new”
  5. JavaScript “instanceof” Operator
  6. JavaScript: How to Use Object.create() to Emulate Constructor?
  7. JavaScript: Property Key "constructor"
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.