JavaScript: Understanding Prototype & Inheritance

, , …,
Buy Xah JavaScript Tutorial.

This page is a tutorial of JavaScript's object, inheritance, prototype.

Every JavaScript object O has a Internal Slot named “prototype”, usually denoted as [[Prototype]]. The value of the [[Prototype]] is some object P (or null). 〔➤ JavaScript: What's Object?ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-ordinary-object-internal-methods-and-internal-slots-getprototypeof

The object P is called the “prototype object” of O. (we'll call it “parent object”.)

When a property is looked up (⁖ 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.

The parent object has its own parent, thus we have what's called a prototype chain. (the prototype chain is never circular.) ECMAScript 2015 §ECMAScript Data Types and Values#sec-invariants-of-the-essential-internal-methods

JavaScript Object Hierarchy

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

How to Find a Object's Parent?

JavaScript: How to Find Object's Prototype/Parent?

How to Create Object with Specified Parent?

JavaScript: How to Create Object with Specified Parent?

Why JavaScript Hierarchy is Confusing

in Java, in a.b.c.p, the dot means parent/child except the last dot, is object/property.

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

in JavaScript, when you see a.b.c.d, that means any of the dotted thing is a property of the object on the left. The value of the property, could be any node in JavaScript's object forest, having nothing to do with any of the object a or a.b or a.b.c.

For example, in Array.prototype.slice.call(…):

Parent of User Created Objects

The parent of literal expression {…} is Object.prototype.

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

The parent of user defined function is Function.prototype.

console.log(
    Object.getPrototypeOf(function ff () { return 3; }) === Function.prototype
); // true

The parent of user defined array is Array.prototype.

console.log(
    Object.getPrototypeOf([]) === Array.prototype
); // true

The parent of user defined regex object is RegExp.prototype.

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

The parent of user created Date object is Date.prototype.

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

〔➤ JavaScript: What Does Keyword “new” Do?

Parent of Buildin Objects

The parent of {Object, Function, Array, Date, RegExp} is Function.prototype. Because, they are functions (more specifically, constructor functions. 〔➤ JavaScript: What's Constructor?〕 ). All function's parent is Function.prototype.

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 parent of {Math, JSON} is Object.prototype. The Math & JSON objects are used as namespace of “static functions”, not really as objects in OOP sense. 〔➤ JavaScript Math Object & Methods〕 〔➤ JavaScript JSON Object & Methods

console.log(
    Object.getPrototypeOf(Math) === Object.prototype &&
    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 named “prototype”. (all functions has a property named “prototype”, by spec.)

For example, you can eval the expression Array.prototype. The value of Array.prototype, is another object. There is no other way to express this object other than 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. 〔➤ JavaScript Data 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
); // true

Root 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
blog comments powered by Disqus