JS: Prototype and Inheritance

Prototype of a Object (aka Parent Object)

Each Object in JavaScript may have a parent object called its prototype object. When this parent is the value null, we say that it doesn't have a parent.

Inheritance

When a property is looked up (e.g. x.color), JavaScript looks at the object to see if it has that property, if not, it looks up its parent, and repeat, until a property is found or a parent is null. This is the technical meaning of inheritance in JavaScript.

Prototype Chain (aka Parent Chain)

• Prototype Chain

Find a Object's Parent

• Get Set Prototype

Create Object with Specified Parent

• Create Object with Parent X

Dot Notation a.b.c Does Not Show Prototype Chain

• JS: Dot Notation and Prototype Chain

Prototype Tree

• JS: Prototype Tree

Prototype of Standard Objects

Parent of Functions

Object, Function, Array, Date, RegExp, Set, Map, Symbol, are all functions.

User created function, including arrow function, and user created class, are also functions.

All their parent is Function.prototype

/* the parent of any function is Function.prototype */

console.log(
  [
    Object,
    Function,
    Array,
    Date,
    RegExp,
    Set,
    Map,
    Symbol,
    class {},
    function () {},
    (x) => 3,
  ].every((x) => (Reflect.getPrototypeOf(x) === Function.prototype)),
);

Parent of Math JSON

Math, JSON are named objects, whose purpose is as namespace to hold useful methods related to math and JSON. Their parent is Object.prototype

〔see Math〕 〔see JSON〕

console.log(
  Reflect.getPrototypeOf(Math) === Object.prototype,
  Reflect.getPrototypeOf(JSON) === Object.prototype,
);

Parent of Dot Prototype Objects

These objects: {Function.prototype, Array.prototype, Date.prototype, RegExp.prototype} serve as parents of user created objects of particular sub-type. Their parent is Object.prototype.

〔see Determine Type of Object〕

/* Parent of builtin constructor object's prototype property is Object.prototype */

console.log(
  Reflect.getPrototypeOf(Function.prototype) === Object.prototype,
  Reflect.getPrototypeOf(Array.prototype) === Object.prototype,
  Reflect.getPrototypeOf(Date.prototype) === Object.prototype,
  Reflect.getPrototypeOf(RegExp.prototype) === Object.prototype,
);

Each of the Function Array Date RegExp function object has a property key "prototype". 〔see Property Key "prototype"〕

For example, you can eval the expression Array.prototype. That means, accessing a property key "prototype" from the object Array. The value of Array.prototype, is a object. There is no special syntax to express this object other than accessing property syntax such as Array.prototype.

Root Prototype of All Objects

The root of all JavaScript standard objects is Object.prototype. Itself doesn't have any parent.

/* Object.prototype doesn't have any parent */
console.log(
  Reflect.getPrototypeOf(Object.prototype) === null,
);

Parent of User Created Objects

The parent of user created objects is the value of the constructor function's "prototype" property, by default.

For example

• if it's a function object, its parent is Function.prototype.
• if it's a object object, its parent is Object.prototype.
• if it's a array object, its parent is Array.prototype.
• if it's new X(), its parent is X.prototype. (normally)

/* parent of user created objects */
console.log(
  Reflect.getPrototypeOf({}) === Object.prototype,
  Reflect.getPrototypeOf([]) === Array.prototype,
  Reflect.getPrototypeOf(/./) === RegExp.prototype,
  Reflect.getPrototypeOf(function () {}) === Function.prototype,
  Reflect.getPrototypeOf(new Date()) === Date.prototype,
  Reflect.getPrototypeOf(new Map()) === Map.prototype,
);

Function to Show Prototype Chain

Show Prototype Chain