扩展init方法而无需递归，javascript

Question

I'm trying to extend functionality from using prototypes, but keep getting Maximum call stack size exceeded, basically, I'm doing this:

 var Parent = function() {};
 Parent.prototype.init = function(options){
    this.val_one = options.one;
    /*more init code*/
 };

var Child = function() {
   Parent.call(this);
};
Child.prototype = Parent.prototype;

Child.prototype.init = function(options) {
    this.val_two = options.two;
    //I also need val_one and all the initiation placed on the parent while keeping the init method name, (shadowing while extending?)

   Parent.prototype.init.call(this, options); 
   //will result in a self loop
   //copy all the method for adding a single extra value? is this the only way to do achieve this?
};

Any help will be appreciated.

Answer 1

 Child.prototype = Parent.prototype; 

is your problem. You must not use that for "inheritance" - it makes Child and Parent instances have exactly the same prototype object.

Morever, as you can test, Parent.prototype.init === Child.prototype.init - you've overwritten the original init method (the one you created using Parent.prototype.init = function(options){…} ) on that single object in the assignment Child.prototype.init = function(options) {…} . So your "super" call is actually calling the method itself again, which leads to your unbound recursion.

Instead, use

Child.prototype = Object.create(Parent.prototype);

and it will work as expected, as those are two distinct objects now.

Answer 2

The init function you made is just another function , it is NOT the constructor and will not be called unless you call it within the constructor.

I made an example for you, hopefully this helps: https://jsfiddle.net/hfmbv98g/

var Parent = function(options) {
// constructor
this.val_one = options.one;
console.log("parent");
};

Parent.prototype.other_method = function() {
    console.log("Parent: other_method")
}

var Child = function(options) {
   Parent.call(this, options);
   this.val_two = options.two
   console.log("child");
};

Child.prototype = Object.create(Parent.prototype); // See note below
Child.prototype.constructor = Child;


Child.prototype.other_method = function() {
    console.log("Child: other_method")
};

You should also read up on this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript