JS — Prototype Chain

Before talking about `prototype chain` we need go to over some concepts.


First we need to know what is `Constructor`.

A constructor is a function used for initializing new objects, and you use the `new` keyword to call the constructor.

function Account() {
this.type = 'checking'; // use `this` in constructor function
// Object creation by constructor
var userAccount = new Account();


Instance is the object you create with `new` keyword.

var userAccount = new Account();

Here `userAccount` object is an instance.


Each object has an `prototype` property, which points to the object’s “parent”.

Instance, Prototype, Constructor

The relationship between these: each constructor has a prototype object that points back to the constructor, and instances have an internal pointer to the prototype.

i.e. instance -> prototype (“parent”)-> constructor

In above example, `userAccount` (instance) has an instance property as `type`. It also has an `__proto__` property that points to its prototype object (its “parent”). That prototype object has an `constructor` points to Account constructor.


We notice that there’s another prototype object inside userAccount’s prototype object and it has lots of methods like `toString`, `valueOf` etc.

Where do they come from ?

This is actually a very basic example of `prototype chain`.

In JavaScript by default all objects inherit from the Object. So those methods are coming from Object.prototype. Object.prototype sits at the top of the prototype chain.

Prototype Chaining

Now we know that in a very basic example, we have following:

userAccount (“instance”) -> Account.prototype -> Object.prototype

What if the Account.prototype were actually an instance of another type? That would mean the prototype itself would have a pointer to a different prototype that, in turn, would have a pointer to another constructor. If that prototype were also an instance of another type, then the pattern would continue, forming a chain between instances and prototypes. This is the basic idea behind prototype chaining.

userAccount (“instance”)->Account.prototype -> ParentAccount.prototype ->GrandpaAccount.prototype->Object.prototype

And this is how inheritance is implemented in JavaScript. We use prototype chain.

A quick example of inheritance through prototype chaining:

// SuperType
function Fruit() {
this.name = 'fruit';
Fruit.prototype.getName = function() {
return this.name;
// SubType
function Apple() {
this.name = 'fuji apple';
this.color = 'red';
// inherit from Fruit
Apple.prototype = new Fruit(); // an instance of another type
Apple.prototype.getColor = function() {
return this.color;
var apple = new Apple();
console.log(apple.getName()); // fuji apple
console.log(apple.name); // fuji apple
console.log(apple.getColor()); // red

As shown `apple` inherit `getName()` method from `Fruit`. Because Apple.prototype points to Fruit.prototype.

apple -> Apple.prototype -> Fruit.prototype -> Object.prototype

Notice that on Apple.prototype also has a property `name` property (“fruit”). This is coming from parent.

Remember: Parent’s instance properties will become children’s prototype properties after prototypal inheritance. (those instance properties “sits” on the prototype chain after inheritance)

Will get more detail on inheritance in another post.

Accessing Properties on Objects

When accessing a property on an object, JS will first lookup at the object itself. If found will stop and return that property. Otherwise it will search on that object’s prototype. If still not found, it will search up the prototype chain until it finds the first occurrence of that property.

Based on this order rule, it’s not hard to understand that why `apple.name` returns `fuji apple` instead of `fruit` even if it also has a `name` property on its prototype. (Because JS found the property on the object itself and it stops searching)

Own and Inherited Properties

`in` operator

To find out if a property exists on an object (its own or inherited properties), we can use the `in` operator (with the `string` format of the property name):

console.log("name" in apple) // true 
console.log("color" in apple) // true
console.log("getColor" in apple) // true
console.log("getName" in apple) // true (inherited)
console.log("color" in fruit) // false
console.log("getColor" in fruit) // false

`for-in` operator

We can also loop through each property (including methods and those from parents) of an object using `for-in` operator:

for (var p in apple) {
console.log(p + ': ' + apple[p]);

Note: for-in will also iterate through “methods” as well, not only properties.


Since an object can have properties from its parent, in case of we want to check if a property is owned by itself, not from parent. We can use `hasOwnProperty` and it only checks for properties, not methods

apple.hasOwnProperty('name')  // true
apple.hasOwnProperty('color') // true
apple.hasOwnProperty('getColor')  // false (methods not work)
apple.hasOwnProperty('getName') // false (methods not work)

Since `hasOwnProperty` only check on properties so it’s always a best practice to use it when iterating through an object keys. Since we don’t want it iterate through methods.

for(var key in object) {
...then do something...

Look at below code:

for (var key in apple) {
for (var key in apple) {
if (apple.hasOwnProperty(key)) {

Now you know the difference and why it’s a best practice. 😊


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.