Javascript：继承原型而不重定义构造函数

Question

I've got a problem understanding javascript inheritance and constructors, despite manuals like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript and http://robotlolita.me/2011/10/09/understanding-javascript-oop.html .

I would like to create a prototype and children inheriting from it. The prototype has a constructor (or in other words, is a function). I want the children to inherit this constructor, instead of re-defining the constructor for each and every child. The constructor of the parent is going to do quite a lot of stuff, the code for which I don't want to duplicate in the children. And even the list of arguments for the constructor might change, in which case I would only like to change them in the parent constructor, not every child as well.

So an example that works on jsfiddle (also see https://jsfiddle.net/9pj1avjh/10/ ):

First the preamble of running tests and a few functions to save typing (skip ahead):

function sayHello2(msg,name){
    document.write(name+": "+msg+" "+this.url+"<br />");
}

function runtest(){
    var c = new child('google.com');
    c.sayHello("Website:","dolf");

    var p = new proto("yahoo.com");
    p.sayHello("Website:");

    document.write("<br />");

}

Define the prototype/parent:

var proto = function(url){
    this.url = url
}
proto.prototype.sayHello = function(msg){
    document.write(msg+" "+this.url+"<br />")
}

This is the meat. It shows the desired behaviour, but it means i always have to redefine the constructor in each child, which I don't want.

var child = function(url){
    this.url = url
}
child.prototype = Object.create(proto.prototype);
child.prototype.sayHello = sayHello2
runtest()

This is more along the lines of what I want code-wise, but not the behaviour. This case causes this.url to be undefined in child:

var child = function(){
}
child.prototype = Object.create(proto.prototype);
child.prototype.constructor = proto.prototype.constructor
child.prototype.sayHello = sayHello2
runtest()

And this doesn't work either, because it causes sayHello2 to also be used on proto instead of just child

var child = proto.prototype.constructor
child.prototype = Object.create(proto.prototype);
child.prototype.sayHello = sayHello2
runtest()

Answer 1

It takes a while to understand what you meant by redefining constructor. What you want to do is to call the parent's constructor when instantiating the child.

So you don't want this, ie reassigning this.url = url , right?

var child = function(url, anotherFancyArg){
    this.url = url;
    this.anotherFancyArg = anotherFancyArg;
}

Do this instead:

var child = function(url, anotherFancyArg){
    proto.apply(this, arguments);
}

Now you can access url and anotherFancyArg inside your child instance using this reference: this.url , this.anotherFancyArg , eg

var c = new child('google.com', 'abc');
console.log(c.url); // you get google.com here

One more thing I noticed. This is wrong:

child.prototype = Object.create(proto.prototype);
child.prototype.constructor = proto.prototype.constructor;

Do this instead:

child.prototype = Object.create(proto.prototype); // you inherit from parent's prototype
child.prototype.constructor = child; // but you instantiate the child object