JavaScript: Understanding Prototype & Inheritance

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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

Every JavaScript object O has a prototype attribute (aka “internal property”). ECMAScript §4#sec-4.3.5 The value of the prototype attribute is some object P. (or null).

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

When a property is accessed, JavaScript will look for the property in the object, if none found, it'll look at its parent, then parent of parent, etc, till the property is found or root object is reached. This is inheritance.

The parent object has its own parent, thus we have what's called a prototype chain. (the prototype chain is never circular.) 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

Note: Firefox and other browsers has a property named __proto__. Its value is the parent object. That is, obj.__proto__ has the same value as Object.getPrototypeOf(obj). You should not use “__proto__”, as it is non-standard and Firefox says it's deprecated. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)

How to Do Inheritance

Inheritance by 「Object.create()」

The cleanest 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

Classic 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. (no return statement would be good.) 〔➤ 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 property named “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

What is the Purpose of Property named 「prototype」?

Every function has a builtin property named “prototype”, inherited from the builtin object Function. (we may call this property the “prototype property” in short, instead of “the property named ‘prototype’”. Don't confuse it with parent object (the “prototype attribute” of a object).)

The value of the “prototype property” is a object. When a function is used as a constructor (that is, called with new keyword), the “prototype property”'s value is used as the parent object for the newly created object.

So, the purpose of “prototype property” is to specify parent object, when the function is used as a constructor for creating new objects ⁖ new function name;. 〔➤ 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);    // great 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 that's the value of Object.prototype.

console.log(
    Object.getPrototypeOf({}) === Object.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's Constructor? What Does Keyword “new” Do?

blog comments powered by Disqus