How do you do inheritance in JavaScript without sharing the same instance of a superclass between all instances of the subclass?

Question

I noticed that every tutorial on how to do JavaScript inheritance does the following:

SubClass.prototype = new SuperClass(); 

But this will create one instance of the superclass and share it among all instances of the subclass.

The problem is that I would like to pass arguments to the constructor of the superclass, which come from the arguments passed to the subclass.

In Java, this will be done as follows:

 class SubClass extends SuperClass { public SubClass(String s) { super(s); } } 

I tried to do something like this:

 function SubClass(args) { this.constructor.prototype = new SuperClass(args); } 

But that will not work. So, is there a way to do this in JavaScript?

Answer 1

So I always did it.

 // Parent object function Thing(options) { //do stuff } Thing.prototype.someMethod = function(){ // some stuff console.log('hello'); } // child object which inherits from the parent function OtherThing(options) { Thing.call(this, options); // do stuff for otherthing } OtherThing.prototype = new Thing(); OtherThing.prototype.someMethod = function(){ // call things original function Thing.prototype.someMethod.call(this); // now do anything different console.log('other thing says hi'); } var testObj = new OtherThing(); testObj.someMethod(); 

Live demo

Answer 2

The general template is as follows:

A temporary constructor is created that inherits from the prototype of the parent constructor. Then the prototype of the child constructor is installed in the instance of the temporary constructor.

 function inherits(Child, Parent) { var Tmp = function() {}; Tmp.prototype = Parent.prototype; Child.prototype = new Tmp(); Child.prototype.constructor = Child; } 

Inside the child constructor, you need to call the parent constructor:

 function Child(a, b, c) { Parent.call(this, a, b); } inherits(Child, Parent); // add prototype properties here 

Inside this call to the this function, this will refer to the new object that is created when new Child() is called, therefore, any initialization is done inside Parent , it is applied to the new object that we are passing.

Answer 3

But this will create one instance of the superclass and share it among all instances of the subclass.

Yes, how inheritance works in JavaScript.

So, is there a way to do this in JavaScript?

Not without terrifying undermining / friction / abuse of the existing paradigm. I recommend a different approach to the realization of what you are striving for.

Answer 4

Another way would be to get rid of class inheritance (but not based on classes), which involves the use of a constructor.

Use Object.create with Object.defineProperties. This is based on a native prototype-based inheritance system that JavaScript follows internally.

More information about it can be found in the MDN and ECMAScript specifications.

However, these methods only work in browsers compatible with ECMAScript 5. This excludes IE8 and later. Fortunately, IE9 supports it, as well as other major browsers. In the long run, I think this will be the way to go.