Javascript prototypal inheritance and the prototype chain

Javascript prototypal inheritance and the prototype chain

Inheritance in Javascript:
Points to be considered when inheritance comes in mind with Javascript

1) Javascript is not a programming languages like OOPS C++, Java or PHP.
2) Javascript is a prototype-based language.
3) Javascript is syntactical sugar
4) Javascript has only one construct called object

By considering the above points now we can say javascript supports only prototypal inheritance.

What is javascript prototypal inheritance?
Before understanding prototypal inheritance, let us know what is the prototype in javascript and how it behaves in javascript.

Prototype :
1) The prototype is a private property of an object which keeps the link to the other objects.
2) As long as the object has a prototype of its own that means prototype chain is exist
3) If the prototype reaches null in an object then that acts as a final link to the prototype chain.

How javascript prototypal inheritance works?
Most of the developers those are familiar with classical inheritance will get bit confusion with javascript prototype inheritance. Let us see the below points how prototype inheritance works in the javascript.

1) When we access a property of an object, it will be searched in object
2) If the property is not available then it will be searched on the prototype of the object
3) If the property is not available then it will be searched on the prototype of the prototype
4) And so on

Let’s see how inheritance works in below code

// create employee object
var Employee = function(name,email) {
    this.name = name;
    this.email = email;
}

// add assignTask by prototype
Employee.prototype.assignTask= function (task) {
    this.task=task;
    console.log('The task ' +this.task+' has been assigned to '+this.name+' and email has been sent to '+this.email);
}

// create instance of employee object
let employeeOne = new Employee('Rajani', 'Rajani@gmail.com');
let employeeTwo = new Employee('John', 'John@gmail.com');

// Assign task to the employees
employeeOne.assignTask('JIRA-1122');
employeeTwo.assignTask('JIRA-4455');

// Output
// The task JIRA-1122 has been assigned to Rajani and email has been sent to Rajani@gmail.com
// The task JIRA-4455 has been assigned to John and email has been sent to John@gmail.com

As shown in the above code, assignTask method will be registered to the employee object using the prototype inheritance method. Now let us see how the prototype chain looks for the above employee object

// create instance of employee object
let employeeOne = new Employee('Rajani', 'Rajani@gmail.com');
let employeeTwo = new Employee('John', 'John@gmail.com');

// Assign task to the employees
employeeOne.assignTask('JIRA-1122');
employeeTwo.assignTask('JIRA-4455');

console.log(Employee.prototype);
console.log(employeeOne);
console.log(employeeTwo);

Employee {name: "Rajani", email: "Rajani@gmail.com", task: "JIRA-1122"}
    name: "Rajani"
    email: "Rajani@gmail.com"
    task: "JIRA-1122"
    __proto__:
        assignTask: ƒ (task)
        length: 1
        name: ""
        arguments: null
        caller: null
        prototype: {constructor: ƒ}
        __proto__: ƒ ()
        [[FunctionLocation]]: js.html:132
        [[Scopes]]: Scopes[2]
        constructor: ƒ (name,email)
        __proto__:
        constructor: ƒ Object()
        __defineGetter__: ƒ __defineGetter__()
        __defineSetter__: ƒ __defineSetter__()
        hasOwnProperty: ƒ hasOwnProperty()
        __lookupGetter__: ƒ __lookupGetter__()
        __lookupSetter__: ƒ __lookupSetter__()
        isPrototypeOf: ƒ isPrototypeOf()
        propertyIsEnumerable: ƒ propertyIsEnumerable()
        toString: ƒ toString()
        valueOf: ƒ valueOf()
        toLocaleString: ƒ toLocaleString()
        get __proto__: ƒ __proto__()
        set __proto__: ƒ __proto__()

As we can clearly see in the above console, the employee object is having the assignTask property.
That assignTask is been holding in the proto link, so as the definition prototype holds the link to the other objects.