JS: Prototype and Inheritance

By Xah Lee. Date: . Last updated: .

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

Here's a short diagram of JavaScript Prototype Hierarchy.

• Object.prototype
  • {…}
  • Function.prototype
    • Object
    • Function
    • Array
    • Date
    • RegExp
    • Set
    • Map
    • Symbol
    • function … {…}class … {…}
  • Array.prototype
    • […]
  • Date.prototype
    • new Date(…)
  • RegExp.prototype
    • /…/…
  • Set.prototype
    • new Set(…)
  • Map.prototype
    • new Map(…)
  • Symbol.prototype
    • Symbol(…)
  • Math
  • JSON

Those colored green are user defined.

Here's some explanation.

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

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

[see JS: Array.prototype.every]

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 JS: Math] [see JS: JSON]

console.log (
 [ Math, JSON ] .every ( ((x) => (Object.getPrototypeOf(x) === Object.prototype )) )
); // true

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 JS: Determine Type of Object]

console.log (
[
 Function.prototype,
 Array.prototype,
 Date.prototype,
 RegExp.prototype,
] .every ( ((x) => (Object.getPrototypeOf(x) === 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.

Root Prototype of All Objects

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

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

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

// parent of user created objects

const gp = Object.getPrototypeOf;

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

Object and Inheritance Topic

  1. JS: Object Overview
  2. JS: Object Type
  3. JS: Determine Type of Object
  4. JS: Object Literal Expression
  5. JS: Prototype and Inheritance
  6. JS: Create Object
  7. JS: Create Object with Parent X
  8. JS: Get/Set Prototype
  9. JS: Prevent Adding Property
  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.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc