Node.js - Prototype Inheritance - Day Seven

What is Prototype?

In JavaScript all objects inherit their property and methods from their prototype. All JavaScript object have their prototype and prototype is also an object. Objects created using an object literally or with new keywords inherit from Object.prototype . For example, objects created using new Date() inherit the Date.Prototype and object created using new Array() inherit the Array.prototype.

• Node.js: V8 JavaScript Engine - Day One
• Node.js: Modules - Day Two
• Node.js: Event And Event Emitter - Day Three
  
• Node.js: Callbacks - Day Four
  
• Node.js: File System - Day Five
  
• Node.js: Buffer - Day Six

In JavaScript each function has a prototype property; we can attach property or methods to this prototype property when we want to apply inheritance.

Example

function Student(name, class_) {
    this.name = name;
    this.class = class_
};

Student.prototype.Print = function() {
    console.log(this.name + " " + "study in " + this.class + " class");
};

var Obj = new Student("Pankaj Choudhary", 12);
console.log(Obj.Print());

Output



In output screen we get two lines -- in the first line we get the result that we expected but he second line is “undefined;” that is, return type of Print function. If we return any value from function then we don’t get this “undefined”.

Example

function Student(name, class_) {
    this.name = name;
    this.class = class_
};

Student.prototype.Print = function() {
    console.log(this.name + " " + "study in " + this.class + " class");
    return 5;
};

var Obj = new Student("Pankaj Choudhary", 12);
console.log(Obj.Print());

Output



As I explained, every object and function has a prototype property but this prototype property is enumerable in nature that means we can’t access this prototype property but each object hase a __proto__(pseudo) property that allows access to prototype property. Using this property we can get the prototype of any object or function constructor.

Example

function Student(name, class_) {
    this.name = name;
    this.class = class_
};

Student.prototype.Print = function() {
    console.log(this.name + " " + "study in " + this.class + " class");
};

var Obj = new Student("Pankaj Choudhary", 12);
console.log(Obj.__proto__);
console.log(Student.prototype);

Output



Example

A more common use of the prototype property is to set it in one fell swoop using either an literal object or a function.

function Student(name, class_) {
    this.name = name;
    this.class = class_;
    this.call = function() {
        console.log("This is call function");
    }
};

Student.prototype = {
    fun1: function() {
        console.log("This is fun1");
    },
    fun2: function() {
        console.log("This is fun2");
    },
    fun3: function() {
        console.log("This is fun3");
    },
};

console.log(Student.prototype);

Output



Example

Interesting thing about prototype is that you can change prototype of any object anytime. For example we have a object1 and you assign the prototype of object1 similar to object2, now you can change prototype of object1 from prototype of object2 to obecjt3.

function Object1() {
    this.demeanor = "happy";
}

function Object2() {
    this.demeanor = "suspicious";
}

var Obj1 = new Object1();
var Obj2 = new Object2();

var Object3 = new Object();
Object3.__proto__ = Obj2;

Obj1.ally = "Tom";


if (console && console.log) {
    console.log(Object3.demeanor === "happy"); // Returns false
    console.log(Object3.demeanor === "suspicious"); // Returns true
    console.log(Object3.ally === "Tom"); // Returns false
    // Turn the Object2 to a Object1.
    Object3.__proto__ = Obj1;
    console.log(Object3.demeanor === "happy"); // Returns true
    console.log(Object3.demeanor === "suspicious"); // Returns false
    console.log(Object3.ally === "Tom"); // Returns true
}

Output



Prototype Inheritance

Using the “__proto__” property of any object we can inherit the methods or property of any other object.

Example 1

var car = { wheels: 4, doors: 2 };
var swift = { company: "suzuki", color: "White" };
swift.__proto__ = car;
console.log(swift.wheels);
console.log("Company of car is =" + swift.company);
console.log("Color of car is =" + swift.color);
console.log("Wheels in car=" + swift.wheels);
console.log("doors in car =" + swift.doors);

Output



In this example we create a car and swift objects. After that we inherit the property of car objects using the “__proto__” property of swift object, now we can access all properties of car object using the swift object.

Example 2

function Student(name, clas) {
    this.Name = name;
    this.Class = clas;
    this.StuInfo = function() {
        console.log("Name of student is " + this.Name + " Class of student is " + this.Class);
    }
}

function School(sname) {
    this.Sname = sname;
    this.SchoolInfo = function() {
        console.log("Name of School is " + this.Sname);
    }
};

var Stuobj = new Student("Pankaj", 12);
var SchObj = new School("AVM");
Stuobj.__proto__ = SchObj;
Stuobj.StuInfo();
Stuobj.SchoolInfo();

Output



Multi Level Inheritance using Prototype Chaining

Similar to multilevel inheritance in OOPS we can also implement the multilevel inheritance in JavaScript.

Example

function Student(name, clas) {
    this.Name = name;
    this.Class = clas;
    this.StuInfo = function() {
        console.log("Name of student is " + this.Name + " Class of student is " + this.Class);
    }
}

function School(sname) {
    this.Sname = sname;
    this.SchoolInfo = function() {
        console.log("Name of School is " + this.Sname);
    }
};

function School1(sname1) {
    this.Sname1 = sname1;
    this.SchoolInfo1 = function() {
        console.log("Name of School is " + this.Sname1);
    }
};
var Stuobj = new Student("Pankaj", 12);
var SchObj = new School("AVM");
var SchObj1 = new School1("APS");
/*Define Prototype of SchObj1*/
SchObj1.__proto__ = SchObj;
/*Define Prototype of Stuobj*/
Stuobj.__proto__ = SchObj1;
Stuobj.StuInfo();
Stuobj.SchoolInfo1();
Stuobj.SchoolInfo();

Output



Inheritance using Object.create() method

In JavaScript Object.create() method is used to create an object either using the specified prototype or properties.

Syntax



If we check the definition of Object.create method then it will look like this.



Using Object.create method we can create an object either by defining the prototype of object or properties for the object.

Example

// Shape - superclass
function Shape(x, y) {
    this.x = x;
    this.y = y;
}

// superclass method
Shape.prototype.Area = function() {
    return this.x * this.y;
};

// Rectangle - subclass
function Rectangle(x, y) {
    Shape.call(this, x, y);
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle(10, 20);
console.log(rect.Area());
console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true

Output



In this example we create Shape function constructor and Rectangle function constructor and after that we define the prototype of Rectangle function equal to Shape function; that means we inherit the Shape function. In Rectangle function we call Shape function using “Call” method along with some parameters. Above code is a perfect example of inheritance in JavaScript.

Inheritance using classes in JavaScript

ECMAScript 6 introduced a new set of keywords implementing classes. After this feature we can create classes in JavaScript similar to OOPS. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based.

Example

"use strict"
class Shape {
    constructor(l, w) {
        this.length = l;
        this.width = w;
    }
};

class Square extends Shape {
    constructor(l) {
        super(l, l);
    }

    get Area() {
        return this.l * this.w;
    }
    set length(nl) {
        this.l = nl;
        this.w = nl;
    }
}

var obj = new Square(10);
console.log(obj.Area);
obj.length = 12;
console.log(obj.Area);

Output



I hoped you liked this article, if you have any query or doubt related to this topic then write your query in comment section. Thanks for reading the article.