Proper way to call superclass functions from subclass

Question

I have a "SuperClass" with "info" as an instance variable. "SuperClass" has function "printInfo()". "printInfo()" needs to access instance variable "info". I want to create a "SubClass" which also has method "printInfo()". I want to call printInfo() of "SuperClass" from "printInfo()" of "SubClass".

SuperClass = function() {     this.info = "I am superclass";     console.log("SuperClass:"); };  SuperClass.prototype.printInfo = function(that) {     console.log("printing from superclass printInfo");     console.log(that.info); };  SubClass = function(){};  SubClass.prototype = new SuperClass();  SubClass.prototype.printInfo = function() {     console.log("calling superclass");     this.constructor.prototype.printInfo(this);     console.log("called superclass"); };  var sc = new SubClass(); sc.printInfo(); 

You can see that I am passing "that" as a parameter to printInfo. Without "that" parameter, "info" is printed as "undefined". Like in the following case, "this.info" is undefined when this function is called from object of "SubClass".

SuperClass.prototype.printInfo = function()     {         console.log("printing from superclass printInfo");         console.log(this.info);     }; 

What is the proper way to override and invoke methods of superclass in javascript, enabling functions to access instance variables of the class?

Answer 1

You are messing with the SubClass's prototype with the SuperClass's object, in this line

SubClass.prototype = new SuperClass(); 

the child's prototype should depend on the Parent's prototype. So, you can inherit like this

SubClass.prototype = Object.create(SuperClass.prototype); 

Also, it is quite normal to change the constructor to the actual function, like this

SubClass.prototype.constructor = SubClass; 

To keep your implementation generic, you can use Object.getPrototypeOf, to get the parent prototype in the inheritance chain and then invoke printInfo, like this

SubClass.prototype.printInfo = function() {     Object.getPrototypeOf(SubClass.prototype).printInfo(this); }; 

Since, info is defined in the SubClass yet, it will print undefined. You might also want to call the parent't constructor, like this

var SubClass = function() {     SuperClass.call(this); }; 

Note: You are creating global variables, by omitting var keyword before SuperClass and SubClass.

Answer 2

After reading all the answers, I am using the following inheritance mechanism:

var SuperClass = function() {     this.info = "I am superclass";     console.log("SuperClass:"); };  SuperClass.prototype.printInfo = function() {     console.log("printing from superclass printInfo");     console.log("printinfo");     console.log(this.info); };  var SubClass = function(){     SuperClass.call(this); };  SubClass.prototype = Object.create(SuperClass.prototype); SubClass.prototype.constructor = SubClass;  SubClass.prototype.printInfo = function() {     console.log("calling superclass");     Object.getPrototypeOf(SubClass.prototype).printInfo.call(this);     console.log("called superclass"); };  var sc = new SubClass(); sc.printInfo();