JS: prototype (property)

Where Does Property Key Prototype Came From

Every function defined by keyword function has a magical property key "prototype", by spec.

// every function defined by keyword function has a property key "prototype"

console.log((function () {}).hasOwnProperty("prototype"));

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

also, builtin constructors all have property key "prototype"

// builtin constructors
console.log(Function.hasOwnProperty("prototype"));
console.log(Array.hasOwnProperty("prototype"));
console.log(Object.hasOwnProperty("prototype"));
console.log(Date.hasOwnProperty("prototype"));

Purpose

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

// create a constructor
function MyF() {}

// create a object
const x = new MyF();

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

You can change the prototype before calling constructor, so that the newly created object's parent is that value.

F.prototype = obj

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 MyF() {}
console.log(MyF.hasOwnProperty("prototype"));

// value of MyF.prototype
const xx = MyF.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 === MyF);

// 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 constructor (property)〕

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:

• The only way to express the value Array.prototype is Array.prototype.
• The only way to express the value Object.prototype is Object.prototype.
• The only way to express the value Function.prototype is Function.prototype.

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

• The value Array.prototype is designed to be the parent of new Array(…).
• The value Object.prototype is designed to be the parent of new Object(…).
• The value Function.prototype is designed to be the parent of new Function(…).

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〕