JS: Property Key "prototype"

By Xah Lee. Date: . Last updated: .

Where Does Property Key Prototype Came Frome

Every Constructor has a magical property key "prototype", by spec.

// 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 JS: Global Functions Without Property Key "prototype"]

Purpose

The property key "prototype" is a mechanism for object created using Constructor to link to a parent.

// create a constructor
function FF() {}

// create a instance
const x = new FF();

// confirm the parent object is FF.prototype
console.log(Reflect.getPrototypeOf(x) === FF.prototype);

You can set a object value to prototype property

F.prototype = obj

before calling constructor, so that the newly created object's parent will be obj.

[see Operator “new”]

[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 data object {"constructor":f}.

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

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

[see Property Attributes]

JavaScript, Constructor, Class

BUY ΣJS JavaScript in Depth