Javascript call Parent constructor in the Child (prototypical inheritance) - How it works?

Question

I know it works, but I don't know why and how. What are the mechanics?

// Parent constructor
function Parent(name){
  this.name = name || "The name property is empty";
}

// Child constructor
function Child(name){
  this.name = name;
}

// Originaly, the Child "inherit" everything from the Parent, also the name property, but in this case
// I shadowing that with the name property in the Child constructor.
Child.prototype = new Parent();

// I want to this: if I dont set a name, please inherit "The name property is empty" from the 
// Parent constructor. But I know, it doesn't work because I shadow it in the Child.
var child1 = new Child("Laura");
var child2 = new Child();

//And the result is undefined (of course) 
console.log(child1.name, child2.name);  //"Laura", undefined

I know what I need, the call() or the apply() method. Call the "super class" (the Parent constructor) from the Child, and pass the this object and the argument name to that. It works:

function Parent(name){
  this.name = name || "The name property is empty";
}

function Child(name){
  // Call the "super class" but WHAT AM I DO? How does it work? I don't understand the process, I lost the line.
  Parent.call(this, name);
}

Child.prototype = new Parent();

var child1 = new Child("Laura");
var child2 = new Child();

console.log(child1.name, child2.name); // "Laura", "The name property is empty"

It works perfectly, but I don't understand what happens. I lost the this in my mind, and I can't follow the process of the call() method. Does that copy the constructor body from the Parent to the Child or what? And where is the this object? Why does it work?

Please help and describe the process, I don't understand.

Answer 1

First of all, stop doing Child.prototype = new Parent(); for inheritance, unless your browser doesn't support any other alternative. That's a very bad style and can have undesired side effects, since it actually runs the constructor logic.

You can use Object.create in every modern browser now.

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

Please note that after this you should also fix the constructor property of Child.prototype so that it correctly points to Child rather than Parent.

Child.prototype.constructor = Child;

Next, how call works? Well call allows to specify which object will be referenced by the this keyword when the function will be executed.

function Child(name){
  //When calling new Child(...), 'this' references the newly created 'Child' instance

  //We then apply the 'Parent' constructor logic to 'this', by calling the 'Parent' function
  //using 'call', which allow us to specify the object that 'this' should reference 
  //during the function execution.
  Parent.call(this, name);
}