Clear Series: Prototype Chain

Updated on January 11, 2021 at 7:11 pm by Mehmet Egemen Albayrak

I am not even entirely sure about how long I’ve been programming Javascript. For some of that time, I never understood the difference between the two of those “name”s:

function Person() {
    this.age = 26
}

// Between this
Person.name = 'Mehmet Egemen'

// and this
Person.prototype.name = 'Mehmet Egemen'

What is the difference between setting a name as a property of the Person and as a property of the prototype of the person?

If you don’t know what a property is, or Javascript Object Notation in general, I suggest you read my JSON Structure and Schema article. I don’t want to detail it here not to bore readers who are familiar with terms but if you are a really lazy fellow(🤦) TL;DR; property is a child key and value pair of a Javascript object, but I don’t think TL;DR; is enough to grasp it.

Anyways!

Abstraction-wise, the above code example is terrible. Also, there is a hidden bastard who is looking for any opportunity to confuse us, the “age”!

What are all those things?

May I say “ha-ha” and create some mystery because we will see very strange things in the below sentences?

When you assign a value to Person.name, you assign a static value to the Person constructor Function, if we have to speak in OOP terms. And we can access this name property by calling it from Person Constructor Function itself.

When you assign a value to name IN the prototype of the Person, your change will affect every Person object created. An example is coming, chief:

function Person(name, sex) {
    this.name = name
    this.age = 25 // No parameter assigned, forever young
    this.sex = 'male' // Sex sells?
}

const john = new Person('John', 'male')
const jane = new Person('Jane', 'female')

console.log(john.name) // Prints John
console.log(jane.name) // Prints Jane

console.log(john.age) // Prints 25
console.log(jane.age) // Prints 25

john.flirt(jane) // Error, sir

Person.prototype.flirt = function (lover) {
    console.log(`${lover.name} sends some infrared signals to ${this.name}, THEY LOVE EACH OTHER!`)
}

john.flirt(jane) // Prints "Jane sends some infrared signals to John, THEY LOVE EACH OTHER!"

// Let's make John and Jane older and give them a new adventure of a new age

Person.prototype.age = 26

console.log(john.age) // Still Prints 25
console.log(jane.age) // Still Prints 25

// Why is that?

A new Person object is created from the Person function’s prototype’s constructor. Yes, the constructor of the newly created, let’s say John object, still points out also the Person prototype which has a newly appended “age” property and a constructor function. I think an image from Chrome Dev Tools would make it clear for you:

Prototype object with a property that has a same key with a property in constructor

We need an explanation now:

  1. Person function is our basis. We create new people from that Person function named John and Jane.
  2. When we create John and Jane, they are created from the constructor as an instance of Person.
  3. Then what is the “age” property in the prototype of Person? Javascript looks at a property in the prototype chain if the value is not present in the instance. So when we query “age” we see 25, if we would delete it then we would see 26.
  4. Every object also has a “__proto__” property which points to the parent object’s prototype in the prototype chain.

I want us to understand this with a diagram:

As you can see Person’s prototype’s constructor forms the John, appended a __proto__ referring to Person’s prototype to achieve inheritance. Knowing that we can mutate or append to/remove from prototypes later. This gives us a dynamic inheritance, an ability that is very expensive and dangerous for some ring bearers.

How to check if John is a Person?

Simple. Javascript provides us an “instanceof” operator for us to use if we want to check that an object is an instance of.. jeez.. an instance of a constructor.

console.log(john instanceof Person) // Prints "true"

Since we are speaking about Javascript, of course there are some quirks when you play with the constructor or the prototype of the parent object in the prototype chain. But this part is about the simplest explanation of the prototype chain so I omit them here, we may visit them later if you would like to.


I keep the article very short for now, to make you understand the basics and not clutter your brain, just let the understanding relax in your mind without any disturbance.

I can make additions and removals to this article by time, it will be up to date. Also, we can dive deep into the prototype subject, you can tell me if you want that. For example, where the Person object’s __proto__ is tied to is a piece of good and valuable knowledge, we should address that.

I wish you a great day! Don’t forget to subscribe for more bad jokes, I have lots of them!

Javascript chainclearexplanationprototypeseriessimple

Leave a Reply

Your email address will not be published. Required fields are marked *