JS inheritance with/without using prototype

Question

I am trying to learn inheritance. If I am defining my method superPrint() in SuperClass, I am unable to execute using the child instance

eg: new ChildClass().superPrint(); //Throws error fn not available

/*Parent Class*/
var SuperClass= function(){
  this.name = '';
  this.superPrint = function(){console.log('Doesnt Work');};
}

/*Child Class*/
var ChildClass= function(){
    this.print=function(){
        console.log('Always works');
    }
}

/*Child method inheriting from the parent method*/
ChildClass.prototype = Object.create(SuperClass.prototype);

/*Instantiating the child method*/ 
var obj = new ChildClass();
obj.print();//This works
obj.superPrint();//This gives error *******

But if the function superPrint() is defined using prototype it works. Why? (called using new ChildClass().workingPrint(); now it will work)

/*Parent Class*/
var SuperClass= function(){
   this.name = '';
}

SuperClass.prototype.workingPrint = function(){console.log('This Works');};

Shilly · Accepted Answer · 2015-10-09 14:49:53Z

2

this.superPrint is a method on the instances SuperClass will create. Since you only copy the prototype over into ChildClass and not create a SuperClass instance for your ChildClass, it won't contain the instance methods.

If you want to use object.create, you could add something like SuperClass.call(this); to the definition of your ChildClass, in addition to copying the prototype.

answered Oct 9, 2015 at 14:49

Shilly

8,5991 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joy Biswas Over a year ago

Can you explain in detail or suggest some material

Shilly Over a year ago

The MDN entry is quite nice in explaining, but can be a bit expansive: developer.mozilla.org/en-US/docs/Web/JavaScript/… For the classical way of doing inheritance with 'new', I liked crockfords explanation: crockford.com/javascript/inheritance.html For a very in depth explanation, the inheritance chapters in 'secrets of the javascript ninja' book by john resig are quite nice. I'm trying to find a good simple explanation for object.create + call, but can't immediately find the one I used to read.

Joy Biswas Over a year ago

OK and also my actual question was why I cant define an inner function. If I define a fn using prototype it works but the block 1 doesnt

The F · Accepted Answer · 2015-10-09 14:50:08Z

0

I think that if the function of your SuperClass is not explicitely defined to be prototyped it is not available to any object of your ChildClass. If that is not the case, your instance of ChildClass will not have access to the functions of a SuperClass instance

Therefore, this will work:

SuperClass= function(){
}
SuperClass.prototype.superPrint = function(){
    console.log('Use prototype to inherit');
};
ChildClass= function(){
    this.print=function(){
    }
}
ChildClass.prototype = Object.create(SuperClass.prototype);

var obj = new ChildClass();
obj.print();
obj.superPrint();

Here is a fiddle in case one wants to play around :)

answered Oct 9, 2015 at 14:50

The F

3,7341 gold badge23 silver badges28 bronze badges

Collectives™ on Stack Overflow

JS inheritance with/without using prototype

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related