JavaScript Tutorial: Understanding Prototype & Inheritance

, , …,

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

Each object has a prototype object. The prototype object is another object (or null), from which properties are inherited from. We may call a object's “prototype object” as “parent object”.

The parent object has its own parent, thus we have what's called a prototype chain. (the prototype chain has no cycles/loops.) ECMAScript §4#sec-4.3.5 ECMAScript §8#sec-8.6.2

How to Find a Object's Prototype?

ways to check a object's prototype
syntaxmeaning
Object.getPrototypeOf(obj)return the object obj's parent object. ECMAScript §15#sec-15.2.3.2
a.isPrototypeOf(b)return true if a is in the prototype chain of b. (that is, if a is ancestor of b) (if a is b, it returns false) ECMAScript §15#sec-15.2.4.6

How to Do Inheritance

Inheritance by 「Object.create()」

The easiest way to create a object with specified parent is by Object.create(obj).

Object.create(obj) → return a new object such that its parent is obj.

// example of creating object with specified parent using Object.create()

// creating a object
var o1 = {};

// creating a object, with o1 as its prototype
var o2 = Object.create(o1);

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

〔☛ JavaScript: Creating Object with Object.create()

Inheritance by Constructor Function

Another way to create a object with a specified parent is by using a constructor function.

  1. Define a function F that does not return a object (returning number, string, is ok). 〔☛ What's Object in JavaScript?
  2. Set F.prototype = parent where parent is the object you want to be the parent object.
  3. Use obj = new F(…) to create the new object.
// create a object with a specified parent, using a constructor

var o1 = {"a":3};               // create a object

var FF = function () {};        // define a function

// set the function's prototype to be the parent object you want
FF["prototype"] = o1;

// create a object, using the function as constructor
var o2 = new FF();

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

〔☛ JavaScript: What's Constructor? What Does Keyword “new” Do?

「isPrototypeOf()」 ≈ Check Prototype Chain

a.isPrototypeOf(b) returns true if a is in the prototype chain of b. (that is, if a is ancestor of b) (if a is b, it returns false) ECMAScript §15#sec-15.2.4.6

// example of using isPrototypeOf() method

var t1 = {"a":1};
var t2 =  Object.create(t1);    // t2's parent is t1

console.log( t1.isPrototypeOf(t2) ); // true

console.log( t1 === Object.getPrototypeOf(t2) ); // true

a.isPrototypeOf(b) returns true even if a is 2 or more levels above b, not just direct parent.

// example of .isPrototypeOf()

var t1 = {};                    // you
var t2 = Object.create(t1);    // child of t1
var t3 = Object.create(t2);    // grand child of t1
var t4 = Object.create(t3);    // grand grand child of t1

console.log( t1.isPrototypeOf(t4) ); // true

x.isPrototypeOf(x) returns false.

var tt = {};
console.log( tt.isPrototypeOf(tt) ); // false

Root of All Objects is 「Object.prototype」

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

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

What's Parent of User Created Objects

Parent of 「{…}」

A object created by literal expression {…} has parent of Object.prototype.

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

Parent of Objects 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's Constructor? What Does Keyword “new” Do?

blog comments powered by Disqus