Understanding Inheritance in JavaScript

Inheritance in javascript is prototypical in nature.
Each object has a prototype object from which it inherits some properties and that prototype inherits from its prototype and so on till Object.prototype.

__proto__ gives the prototype of the object. Like in the above example, object1 inherits from its prototype (which can be accessed through object1.__proto__ or by Object.getPrototypeOf(object1)) and so on till Object.prototype.

object1.__proto__ === Object.getPrototypeOf(object1)

Let's take an example:

const object1 = Object.create({parentProp: ‘this is on prototype’})

Object.create method creates an object and sets the object passed in the argument as the prototype.
object1 doesn't have any property of its own. But when we call object1.parentProp looks up in the inheritance chain and calls the method of the prototype. If we call object1.toString() it looks all the way up to Object.prototype and call toString from there.

object1.parentProp() // returns "this is on prototype"
object1.toString() // returns "[object Object]"

Adding properties to prototype

function Person(firstName, lastName) {
   this.name = `${firstName} ${lastName}`
}
Person.prototype.introduction = function() {
   return `Hi my name is ${this.name}`
}
const person1 = new Person('smith', 'john')
person1.introduction()
// Hi my name is smith john

Here we have declared a Person constructor method. Functions have prototype property which can be used to add new methods or overwrite methods deep in the prototype chain.

This Person constructor has both properties, “prototype and “__proto__”.

Person.__proto__ is the prototype object for the Person function.
Functions are themselves objects in javascript.

Person.prototype is the property that gives access to the prototype of object instance created by calling Person constructor.

const person1 = new Person(‘smith’, ‘john’);
Person.prototype.isPrototypeOf(person1)
// return true
person1.__proto__ === Person.prototype
// return true

What properties are inherited

Only the properties on the prototype are inherited.
For example:
Person function below has a property gender attached to it. We create a Person instance P1 by calling new and invoking the constructor.
But P1 cannot reference gender as it’s not on either instance or the prototype.

function Person(firstName, lastName) {
   this.name = `${firstName} ${lastName}`
}
Person.gender = 'male';
const P1 = new Person('john', 'doe');
console.log(P1.name) // john doe
console.log(P1.gender) // undefined

Why create properties on the prototype

By creating properties (mainly methods) on the prototype instead of associating with an instance, helps in avoiding the creation of duplicate properties across multiple instances.

function Person(firstName, lastName) {
   this.name = `${firstName} ${lastName}`;
   this.sayHi = function(person) { 
     return `Hello ${person.name}`  
   } 
}
Person.prototype.introduction = function() {
   return `Hi my name is ${this.name}`
}
const person1 = new Person('smith', 'john')
const person2 = new Person('john', 'doe')

In the above example, person1 and person2 will have “name” and “sayHi” as their instance properties and “introduction” will be shared between both. Imagine if there are more properties like “sayHi”, the performance of the constructor will suffer.

Another advantage is that if you want to modify the prototype method, it will reflect for all the instances.

Person.prototype.introduction = function() {
 return `Hello, I am ${this.name}`;
}
person1.introduction() // Hello, I am smith john
person2.introduction() // Hello, I am john doe