Javascript call Родительский конструктор в Child (прототипное наследование) - Как это работает?

Я знаю, что это работает, но я не знаю, почему и как. Что такое механика?

// 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(). Вызовите "суперкласс" (конструктор Parent) из Child и передайте этому объекту 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? Почему это работает?

Пожалуйста, помогите и опишите процесс, я не понимаю.

Ответы

Ответ 1

Прежде всего, прекратите выполнение Child.prototype = new Parent(); для наследования, если ваш браузер не поддерживает какой-либо другой альтернативы. Это очень плохой стиль и может иметь нежелательные побочные эффекты, поскольку он фактически запускает логику конструктора.

Теперь вы можете использовать Object.create в каждом современном браузере.

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

Обратите внимание, что после этого вы также должны исправить свойство constructor Child.prototype, чтобы оно правильно указывало на 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);
}