Dhananjay Kumar

In JavaScript, there are multiple ways to create an object. However, among all the most popular is using a function as a constructor.  

A function returns a newly created object if it is called using the new, which is also known as Constructor Invocation Pattern.

You can create a function constructor like any other normal function as shown below,

function Horse(name, age, owner, speed) {
    this.name = name;
    this.age = age;
    this.owner = owner;
    this.speed = speed;
}
 
let h1 = new Horse("foo", 12, "foo owner", 40);
console.log(h1);

Above, we are calling Horse function using the new, so it returns a newly created object.  Now let us say there is one more function constructor Cat, which returns a Cat object.

function Cat(name, age, owner, isCute) {
    this.name = name;
    this.age = age;
    this.owner = owner;
    this.isCute = isCute;
}
 
let c1 = new Cat("catfoo", 7, "cat owner", true);
console.log(c1);

Note: An arrow function can not be used as a constructor.

If you see Cat and Horse, both have common properties such that name, age, and owner. These shared properties can be extracted to another function called Animal, and both Cat and Horse should be linked to that.

So above functions can be refactored as shown below,

 
function Animal(name, age, owner) {
    this.name = name;
    this.age = age;
    this.owner = owner;
}
 
function Horse(name, age, owner, speed) {
    this.speed = speed;
}
 
function Cat(name, age, owner, isCute) {
 
    this.isCute = isCute;
}

Now you can create a generic Animal object by calling Animal function using the new operator and can create specific Dog, and Cat objects call Dog and Cat function, respectively.

However, so far, these objects are not linked to each other. For example, Cat and Dog do not have Name, Age, and Owner properties as they are not linked to the Animal.  

To link the object, you need to link the function constructors. After linking, Animal constructor will act as the parent of Horse and Cat constructor.

There are two steps to link function constructors and create inheritance between them,

1. By Indirectly calling parent function constructor using the apply or call to pass the current object. This step removes duplicate code.
2. Linking prototypes. This step creates inheritance or, in more accurate words linking objects of these constructors.

Let us modify the Horse constructor,

function Horse(name, age, owner, speed) {
    Animal.call(this, name, age, owner);
    this.__proto__ = Animal.prototype;
    this.speed = speed;
}

Let us modify the Cat constructor,

function Cat(name, age, owner, isCute) {
    Animal.call(this, name, age, owner)
    this.__proto__ = Animal.prototype;
    this.isCute = isCute;
}

So now, Horse and Cat are linked to Animal, and as you see in bottom example, properties added to Animal prototypes can be read with Cat and Horse objects.

let h1 = new Horse("foo", 12, "foo owner", 40);
console.log(h1);
let c1 = new Cat("catfoo", 7, "cat owner", true);
console.log(c1);
 
h1.__proto__.country = "India";
console.log(h1.country);
console.log(c1.country);
c1.__proto__.country = "USA";
console.log(h1.country);
console.log(c1.country);
c1.country = "UK";
console.log(h1.country);
console.log(c1.country);

So, I hope you understand how you can link function constructors and can create a kind of Inheritance in JavaScript. I hope you find this post useful. Thanks for reading.