JS: Prototype and Inheritance

By Xah Lee. Date: . Last updated: .
• Object.prototype
  • {…}
  • Function.prototype
    • Object
    • Function
    • Array
    • Date
    • RegExp
    • function … {…}
  • Array.prototype
    • […]
  • Date.prototype
    • new Date(…)
  • RegExp.prototype
    • /…/…
  • Math
  • JSON
JavaScript Prototype Hierarchy diagram. Image version: 510×654

Prototype of a Object

Every object obj has a Internal Slot named “prototype”, usually written as “[[Prototype]]”.

The value of the [[Prototype]] is some object P, or null. The object P is called the “prototype object” of obj. We'll call it “parent object”.

ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-ordinary-object-internal-methods-and-internal-slots-getprototypeof

Inheritance

When a property is looked up (For example, 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

A object's parent of parent of parent etc forms a chain. This is called a prototype chain. ECMAScript 2015 §ECMAScript Data Types and Values#sec-invariants-of-the-essential-internal-methods

Note: the prototype chain is never circular, and is impossible to create circular prototype chain.

Note: not all objects have a parent, but buildin objects do (except Object.prototype, which is the root, having parent of null).

You can easily creat a object without parent by Object.create(null). [see JS: Object.create]

How to Find a Object's Parent?

JS: Get/Set Prototype

How to Create Object with Specified Parent?

JS: Create Object with Parent X

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

When you see a.b.c.d in JavaScript, it has very different meaning than Java or Python, Ruby. This is a major point of confusion.

In Java, in a.b.c.p, the dot means parent/child except the last dot, is object/property. So, a is parent of b, b is parent of c, and c is the object that has member p.

In JavaScript, dot always means object/property relationship. There's no direct syntax to show parent chain.

in JavaScript, when you see a.b.c.d, the left/right thing of any dot has a object/property relationship.

It's parsed like this: (((a).b).c).d.

The value of the property, such as a.b, could be any object, having nothing to do with any of the object a or a.b or a.b.c.

For example, the expression Array.prototype.slice.call:

Prototype of Standard Objects

All function's parent is Function.prototype, by default.

console.log (
  Object.getPrototypeOf(Object) === Function.prototype &&
  Object.getPrototypeOf(Function) === Function.prototype &&
  Object.getPrototypeOf(Array) === Function.prototype &&
  Object.getPrototypeOf(Date) === Function.prototype &&
  Object.getPrototypeOf(RegExp) === Function.prototype
); // true

The Math and JSON objects are used as namespace for “static functions”. Math and JSON are not functions. [see JS: Math] [see JS: JSON]

console.log (
 Object.getPrototypeOf(Math) === Object.prototype &&
 Object.getPrototypeOf(JSON) === Object.prototype
); // true

Parent of Function.prototype is Object.prototype.

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

Each of the {Function, Array, Date, RegExp} function object has a property key "prototype". [see JS: 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 or Array["prototype"].

These objects: {Function.prototype, Array.prototype, Date.prototype, RegExp.prototype} serve as parents of user created objects of particular sub-datatype. These objects's parent is Object.prototype. [see JS: Value Types]

console.log (
 Object.getPrototypeOf ( Function.prototype ) === Object.prototype &&
 Object.getPrototypeOf ( Array.prototype ) === Object.prototype &&
 Object.getPrototypeOf ( Date.prototype ) === Object.prototype  &&
 Object.getPrototypeOf ( RegExp.prototype ) === Object.prototype
); // true

Root Prototype of All Objects is 「Object.prototype」

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

Object.getPrototypeOf(Object.prototype) === null // true

Note: it is possible to have a object without parent.

// creating object without parent
const tt = Object.create(null);
console.log( Object.getPrototypeOf(tt) === null ); // true

[see JS: Object.create]

Prototype of User Created Objects

Here's the prototype of user created objects via literal expression.

// parent of user created objects via literal expression

console.log (
Object.getPrototypeOf( {} ) === Object.prototype &&
Object.getPrototypeOf( [] ) === Array.prototype &&
Object.getPrototypeOf( function () {} ) === Function.prototype &&
Object.getPrototypeOf( /./ ) === RegExp.prototype &&
Object.getPrototypeOf( new Date() ) === Date.prototype
); // true

Parent of Object Created by Constructor Function

The parent of object created by new F(…) is:

// example of inheritance by constructor

const o1 = {};
const FF = function () { };
FF.prototype = o1;
const o2 = new FF();

console.log( Object.getPrototypeOf(o2) === o1 ); // true

Another example, using the default constructor function Date:

// example of inheritance by constructor
const dd = new Date();

console.log( Object.getPrototypeOf(dd) === Date["prototype"]); // true

[see JS: Operator “new”]

Object and Inheritance Topic

  1. JS: Object Overview
  2. JS: Object Type
  3. JS: Prototype and Inheritance
  4. JS: Create Object
  5. JS: Object Literal Expression
  6. JS: Get/Set Prototype
  7. JS: Create Object with Parent X
  8. JS: Prevent Adding Property
  9. JS: Determine Type of Object
  10. JS: Clone, Deep Copy Object/Array
  11. JS: Test Equality of Objects
  12. JS: Object Object
  13. JS: Object.prototype
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.