JavaScript: Property Key "prototype"

By Xah Lee. Date: . Last updated: .

Every constructor function has a magical property key "prototype".

πŸ›‘ WARNING: The value of a property key "prototype" of a object X is NOT the prototype (aka parent) of object X. [see Prototype and Inheritance]

// every constructor function has a property key "prototype"

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

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

// arrow function does not
console.log(
  ((x) => (x + 1)).hasOwnProperty("prototype") === false,
);

[see Property Overview]

[see JavaScript: Global Functions Without Property Key "prototype"]

Where Does Key "prototype" Came From?

Every constructor function has a property key "prototype", by spec.

Purpose

The property key "prototype" is a mechanism for object created using new F() to link to a parent.

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.

[see Operator β€œnew”]

function FF() {}
const x = new FF();
console.log(Reflect.getPrototypeOf(x) === FF.prototype);

[see Create Object with Parent X]

Default Value of Property Key "prototype"

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

// Default Value of Property Key "prototype"

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

// value of FF.prototype
const xx = FF.prototype;

// its value is a data object
console.log(
  Reflect.apply(
    Object.prototype.toString,
    xx,
    [],
  ) === "[object Object]",
);

// with just 1 property
console.log(
  Object.getOwnPropertyNames(xx).length === 1,
);

// the property key is "constructor"
console.log(
  xx.hasOwnProperty("constructor"),
);

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

// show its attributes
console.log(
  JSON.stringify(
    Object.getOwnPropertyDescriptor(xx, "constructor"),
  ) === `{"writable":true,"enumerable":false,"configurable":true}`,
);

// show its parent
console.log(Reflect.getPrototypeOf(xx) === Object.prototype);

[see 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.

/* [
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(
  Reflect.getPrototypeOf(new Object()) === Object.prototype,
  Reflect.getPrototypeOf(new Function()) === Function.prototype,
  Reflect.getPrototypeOf(new Array()) === Array.prototype,
  Reflect.getPrototypeOf(new Date()) === Date.prototype,
  Reflect.getPrototypeOf(new RegExp()) === RegExp.prototype,
);

Standard Constructor's Prototype Property Cannot be Changed

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

console.log(
  Object.getOwnPropertyDescriptor(Array, "prototype").writable === false,
);

[see Property Attributes]

JavaScript Constructor/Class

BUY Ξ£JS JavaScript in Depth