Post
Ask Question

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.

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
  1. function Student(name, class_) {  
  2.     this.name = name;  
  3.     this.class = class_  
  4. };  
  5.   
  6. Student.prototype.Print = function() {  
  7.     console.log(this.name + " " + "study in " + this.class + " class");  
  8. };  
  9.   
  10. var Obj = new Student("Pankaj Choudhary", 12);  
  11. console.log(Obj.Print());  
Output

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
  1. function Student(name, class_) {  
  2.     this.name = name;  
  3.     this.class = class_  
  4. };  
  5.   
  6. Student.prototype.Print = function() {  
  7.     console.log(this.name + " " + "study in " + this.class + " class");  
  8.     return 5;  
  9. };  
  10.   
  11. var Obj = new Student("Pankaj Choudhary", 12);  
  12. console.log(Obj.Print());  
Output

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
  1. function Student(name, class_) {  
  2.     this.name = name;  
  3.     this.class = class_  
  4. };  
  5.   
  6. Student.prototype.Print = function() {  
  7.     console.log(this.name + " " + "study in " + this.class + " class");  
  8. };  
  9.   
  10. var Obj = new Student("Pankaj Choudhary", 12);  
  11. console.log(Obj.__proto__);  
  12. console.log(Student.prototype);  
Output

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.
  1. function Student(name, class_) {  
  2.     this.name = name;  
  3.     this.class = class_;  
  4.     this.call = function() {  
  5.         console.log("This is call function");  
  6.     }  
  7. };  
  8.   
  9. Student.prototype = {  
  10.     fun1: function() {  
  11.         console.log("This is fun1");  
  12.     },  
  13.     fun2: function() {  
  14.         console.log("This is fun2");  
  15.     },  
  16.     fun3: function() {  
  17.         console.log("This is fun3");  
  18.     },  
  19. };  
  20.   
  21. console.log(Student.prototype);  
Output

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.
  1. function Object1() {  
  2.     this.demeanor = "happy";  
  3. }  
  4.   
  5. function Object2() {  
  6.     this.demeanor = "suspicious";  
  7. }  
  8.   
  9. var Obj1 = new Object1();  
  10. var Obj2 = new Object2();  
  11.   
  12. var Object3 = new Object();  
  13. Object3.__proto__ = Obj2;  
  14.   
  15. Obj1.ally = "Tom";  
  16.   
  17.   
  18. if (console && console.log) {  
  19.     console.log(Object3.demeanor === "happy"); // Returns false  
  20.     console.log(Object3.demeanor === "suspicious"); // Returns true  
  21.     console.log(Object3.ally === "Tom"); // Returns false  
  22.     // Turn the Object2 to a Object1.  
  23.     Object3.__proto__ = Obj1;  
  24.     console.log(Object3.demeanor === "happy"); // Returns true  
  25.     console.log(Object3.demeanor === "suspicious"); // Returns false  
  26.     console.log(Object3.ally === "Tom"); // Returns true  
  27. }  
Output

output

Prototype Inheritance

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

Example 1
  1. var car = { wheels: 4, doors: 2 };  
  2. var swift = { company: "suzuki", color: "White" };  
  3. swift.__proto__ = car;  
  4. console.log(swift.wheels);  
  5. console.log("Company of car is =" + swift.company);  
  6. console.log("Color of car is =" + swift.color);  
  7. console.log("Wheels in car=" + swift.wheels);  
  8. console.log("doors in car =" + swift.doors);  
Output

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
  1. function Student(name, clas) {  
  2.     this.Name = name;  
  3.     this.Class = clas;  
  4.     this.StuInfo = function() {  
  5.         console.log("Name of student is " + this.Name + " Class of student is " + this.Class);  
  6.     }  
  7. }  
  8.   
  9. function School(sname) {  
  10.     this.Sname = sname;  
  11.     this.SchoolInfo = function() {  
  12.         console.log("Name of School is " + this.Sname);  
  13.     }  
  14. };  
  15.   
  16. var Stuobj = new Student("Pankaj", 12);  
  17. var SchObj = new School("AVM");  
  18. Stuobj.__proto__ = SchObj;  
  19. Stuobj.StuInfo();  
  20. Stuobj.SchoolInfo();  
Output

output

Multi Level Inheritance using Prototype Chaining

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

Example
  1. function Student(name, clas) {  
  2.     this.Name = name;  
  3.     this.Class = clas;  
  4.     this.StuInfo = function() {  
  5.         console.log("Name of student is " + this.Name + " Class of student is " + this.Class);  
  6.     }  
  7. }  
  8.   
  9. function School(sname) {  
  10.     this.Sname = sname;  
  11.     this.SchoolInfo = function() {  
  12.         console.log("Name of School is " + this.Sname);  
  13.     }  
  14. };  
  15.   
  16. function School1(sname1) {  
  17.     this.Sname1 = sname1;  
  18.     this.SchoolInfo1 = function() {  
  19.         console.log("Name of School is " + this.Sname1);  
  20.     }  
  21. };  
  22. var Stuobj = new Student("Pankaj", 12);  
  23. var SchObj = new School("AVM");  
  24. var SchObj1 = new School1("APS");  
  25. /*Define Prototype of SchObj1*/  
  26. SchObj1.__proto__ = SchObj;  
  27. /*Define Prototype of Stuobj*/  
  28. Stuobj.__proto__ = SchObj1;  
  29. Stuobj.StuInfo();  
  30. Stuobj.SchoolInfo1();  
  31. Stuobj.SchoolInfo();  
Output

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

output

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

output

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

Example
  1. // Shape - superclass  
  2. function Shape(x, y) {  
  3.     this.x = x;  
  4.     this.y = y;  
  5. }  
  6.   
  7. // superclass method  
  8. Shape.prototype.Area = function() {  
  9.     return this.x * this.y;  
  10. };  
  11.   
  12. // Rectangle - subclass  
  13. function Rectangle(x, y) {  
  14.     Shape.call(this, x, y);  
  15. }  
  16.   
  17. // subclass extends superclass  
  18. Rectangle.prototype = Object.create(Shape.prototype);  
  19.   
  20. var rect = new Rectangle(10, 20);  
  21. console.log(rect.Area());  
  22. console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true  
  23. console.log('Is rect an instance of Shape?', rect instanceof Shape); // true  
Output

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
  1. "use strict"  
  2. class Shape {  
  3.     constructor(l, w) {  
  4.         this.length = l;  
  5.         this.width = w;  
  6.     }  
  7. };  
  8.   
  9. class Square extends Shape {  
  10.     constructor(l) {  
  11.         super(l, l);  
  12.     }  
  13.   
  14.     get Area() {  
  15.         return this.l * this.w;  
  16.     }  
  17.     set length(nl) {  
  18.         this.l = nl;  
  19.         this.w = nl;  
  20.     }  
  21. }  
  22.   
  23. var obj = new Square(10);  
  24. console.log(obj.Area);  
  25. obj.length = 12;  
  26. console.log(obj.Area);  
Output

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.


Similar Articles