Javascript 在 Child 中调用 Parent 构造函数（原型继承） - 它是如何工作的？

Question

我知道它有效，但我不知道为什么以及如何。机制是什么？

// 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

我知道我需要什么，call() 或 apply() 方法。从Child 调用“超类”（Parent 构造函数），并将this 对象和参数name 传递给它。它有效：

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"

效果很好，但我不明白会发生什么。脑子里把this丢了，跟不上call()方法的流程。这会将构造函数主体从Parent 复制到Child 还是什么？ this 对象在哪里？为什么会起作用？

请帮忙描述一下过程，我不明白。

Answer 1

首先，停止使用Child.prototype = new Parent(); 进行继承，除非您的浏览器不支持任何其他替代方案。这是一种非常糟糕的风格，并且可能会产生不良副作用，因为它实际上运行的是构造函数逻辑。

您现在可以在每个现代浏览器中使用Object.create。

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

请注意，在此之后您还应该修复Child.prototype 的constructor 属性，使其正确指向Child 而不是Parent。

Child.prototype.constructor = Child;

接下来，call 是如何工作的？那么call 允许指定在函数执行时this 关键字将引用哪个对象。

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);
}