JavaScript: Prototype and Inheritance

By Xah Lee. Date: . Last updated: .
JavaScript object tree
JavaScript object tree.

Prototype of a Object

Every JavaScript object O 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 O. We'll call it “parent object”. ES2015 §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. ES2015 §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 object 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 JavaScript: Creating Object with Object.create()

How to Find a Object's Parent?

JavaScript: Find Object's Prototype/Parent

How to Create Object with Specified Parent?

JavaScript: How to Create Object with Parent X?

Dot Donation 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 object Array.prototype.slice.call:

Prototype of Standard Objects

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

console.log (Object.getPrototypeOf(Object) === Function.prototype ); // true
console.log (Object.getPrototypeOf(Function) === Function.prototype ); // true
console.log (Object.getPrototypeOf(Array) === Function.prototype ); // true
console.log (Object.getPrototypeOf(Date) === Function.prototype ); // true
console.log (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 JavaScript: Math Methods〕 〔➤see JavaScript: JSON Methods

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

The 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 JavaScript: 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 JavaScript: Data Types

console.log ( Object.getPrototypeOf ( Function.prototype ) === Object.prototype ); // true
console.log ( Object.getPrototypeOf ( Array.prototype ) === Object.prototype ); // true
console.log ( Object.getPrototypeOf ( Date.prototype ) === Object.prototype ); // true
console.log ( 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
var tt = Object.create(null);
console.log( Object.getPrototypeOf(tt) === null ); // true

〔➤see JavaScript: Creating Object with 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 ); // true
console.log ( Object.getPrototypeOf ( [] ) === Array.prototype ); // true
console.log ( Object.getPrototypeOf ( function () {} ) === Function.prototype ); // true
console.log ( Object.getPrototypeOf ( /./ ) === RegExp.prototype ); // true, regex
console.log ( 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

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

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

Another example, using the default constructor function Date:

// example of inheritance by constructor
var dd = new Date();
console.log( Object.getPrototypeOf(dd) === Date["prototype"]); // true

〔➤see JavaScript: Operator “new”

Object and Inheritance topics

  1. JavaScript: Object System Overview
  2. JavaScript: What's Object?
  3. JavaScript: Prototype and Inheritance
  4. JavaScript: Creating Object
  5. JavaScript: Object Literal Expression {…}
  6. JavaScript: Creating Object with Object.create()
  7. JavaScript: Find Object's Prototype/Parent
  8. JavaScript: How to Create Object with Parent X?
  9. JavaScript: Prevent Adding/Deleting/Modifying Object Properties
  10. JavaScript: Determine Type of Object
  11. JavaScript: Primitive Types Object Wrapper
  12. JavaScript: Clone Object
  13. JavaScript: Test Equality of Objects
  14. JavaScript: Boolean() Constructor Object
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.