Javascript调用父构造函数在Child（原型继承） - 它是如何工作的？ [英] Javascript call Parent constructor in the Child (prototypical inheritance) - How it works?

问题描述

我知道它工作，但我不知道为什么和如何。什么是机制？

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

我知道我需要什么， （）或 apply（）方法。从 Child 中调用 super class （ Parent 构造函数） 此对象和参数 name 。它的工作原理：

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"

了解发生了什么。我失去了这个在我心中，我不能跟踪 call（）方法的过程。是否将构造函数体从 Parent 复制到 Child 或什么？ 这个对象在哪里？为什么它会工作？

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.

推荐答案

首先，停止 Child.prototype = new Parent（）; 继承，除非您的浏览器不支持任何其他替代方法。这是一个非常糟糕的风格，可以有不需要的副作用，因为它实际上运行的构造函数逻辑。

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.

可以使用 Object.create

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

请注意，在此之后，您还应修复构造函数属性 Child.prototype ，以便正确指向 Child 而不是父。

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;

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

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

这篇关于Javascript调用父构造函数在Child（原型继承） - 它是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！