Warum ist es notwendig, dass die Prototyp-Konstruktor?

Es ist nicht immer notwendig, aber es hat seine nutzt. Nehmen wir an, wir wollten eine copy-Methode auf der Basis Person Klasse. Wie diese:

//define the Person Class  
function Person(name) {
    this.name = name;
}  

Person.prototype.copy = function() {  
    //return new Person(this.name); //just as bad
    return new this.constructor(this.name);
};  

//define the Student class  
function Student(name) {  
    Person.call(this, name);
}  

//inherit Person  
Student.prototype = Object.create(Person.prototype);

Nun, was passiert, wenn wir einen neuen Student und kopieren?

var student1 = new Student("trinth");  
console.log(student1.copy() instanceof Student); //=> false

Die Kopie ist nicht eine Instanz von Student. Dies ist, weil Sie (ohne explizite Prüfungen), hätten wir keine Möglichkeit, wieder eine Student Kopie von der "Basis" - Klasse. Können wir nur zurückgeben Person. Wenn jedoch mussten wir einen reset der Konstruktor:

//correct the constructor pointer because it points to Person  
Student.prototype.constructor = Student;

...dann funktioniert alles wie erwartet:

var student1 = new Student("trinth");  
console.log(student1.copy() instanceof Student); //=> true

InformationsquelleAutor Wayne Burkett

TLDR; Nicht super notwendig, aber wird wohl langfristig helfen, und es ist genauer, um so zu tun.

HINWEIS: Viel bearbeitet, wie meine Vorherige Antwort war verwirrend geschrieben und hatte einige Fehler, die ich vergessen in meiner Eile zu beantworten. Danke an diejenigen, die darauf hinwies, einige schlimme Fehler.

Grundsätzlich ist es zu Draht subclassing korrekt in Javascript. Wenn wir eine Unterklasse, haben wir einige abgefahrene Dinge, um sicherzustellen, dass die prototypal delegation ordnungsgemäß funktioniert, einschließlich das überschreiben einer prototype Objekt. Überschreiben einer prototype Objekt enthält die constructor, so dass wir dann beheben müssen Sie die Referenz.

Lassen Sie uns schnell gehen, wie 'Klassen' in ES5 Arbeit.

Lassen Sie uns sagen, Sie haben eine Konstruktor-Funktion und seinem Prototyp:

//Constructor Function
var Person = function(name, age) {
  this.name = name;
  this.age = age;
}

//Prototype Object - shared between all instances of Person
Person.prototype = {
  species: 'human',
}

Beim Aufruf des Konstruktors instanziiert, sagen Adam:

//instantiate using the 'new' keyword
var adam = new Person('Adam', 19);

Den new - Schlüsselwort aufgerufen wird, mit "Person" im Grunde läuft die Person Konstruktor mit ein paar zusätzlichen Zeilen code:

function Person (name, age) {
  //This additional line is automatically added by the keyword 'new'
  //it sets up the relationship between the instance and the prototype object
  //So that the instance will delegate to the Prototype object
  this = Object.create(Person.prototype);

  this.name = name;
  this.age = age;

  return this;
}

/* So 'adam' will be an object that looks like this:
 * {
 *   name: 'Adam',
 *   age: 19
 * }
 */

Wenn wir console.log(adam.species) der lookup fehl am adam Instanz, das prototypal Kette um seinen .prototype, die Person.prototype - und Person.prototype hat eine .species Eigenschaft, so ist der lookup erfolgreich sein wird, bei Person.prototype. Es wird dann melden Sie 'human'.

Hier, die Person.prototype.constructor Recht zu Person.

So, nun der interessante Teil, die so genannte 'Unterklassen'. Wenn wir schaffen wollen eine Student Klasse, ist eine Unterklasse der Person Klasse mit einigen zusätzlichen änderungen, die wir brauchen werden, um sicherzustellen, dass die Student.prototype.constructor Punkte, um Studenten für die Richtigkeit.

Es nicht, dies von selbst. Wenn Sie eine Unterklasse der code sieht wie folgt aus:

var Student = function(name, age, school) {
 //Calls the 'super' class, as every student is an instance of a Person
 Person.call(this, name, age);
 //This is what makes the Student instances different
 this.school = school
}

var eve = new Student('Eve', 20, 'UCSF');

console.log(Student.prototype); //this will be an empty object: {}

Aufrufen new Student() hier würde zurückgeben, ein Objekt mit all den Eigenschaften, die wir wollen. Hier, wenn wir überprüfen eve instanceof Person, würde es wieder false. Wenn wir versuchen, auf eve.species, würde es wieder undefined.

In anderen Worten, wir müssen Draht, delegation, so dass eve instanceof Person gibt true zurück, und so, dass Instanzen von Student delegieren richtig zu Student.prototype, und dann Person.prototype.

ABER da wir benennen es mit der new Stichwort, denken Sie daran, was dieser Aufruf fügt? Es nennen würde Object.create(Student.prototype) ist, wie wir eingerichtet, dass delegational Beziehung zwischen Student und Student.prototype. Beachten Sie, dass es jetzt Student.prototype leer ist. So suchen .species eine Instanz von Student scheitern würden, wie es die Delegierten nur Student.prototype, und die .species Eigenschaft nicht vorhanden ist, auf Student.prototype.

Wenn wir das tun, weisen Sie Student.prototype zu Object.create(Person.prototype), Student.prototype sich dann die Delegierten Person.prototype, und auf der Suche nach eve.species zurück human als wir erwarten. Vermutlich würden wir wollen, dass es Erben von Studenten.Prototyp UND Person.der Prototyp. Also müssen wir alle zu beheben.

/* This sets up the prototypal delegation correctly 
 *so that if a lookup fails on Student.prototype, it would delegate to Person's .prototype
 *This also allows us to add more things to Student.prototype 
 *that Person.prototype may not have
 *So now a failed lookup on an instance of Student 
 *will first look at Student.prototype, 
 *and failing that, go to Person.prototype (and failing /that/, where do we think it'll go?)
*/
Student.prototype = Object.create(Person.prototype);

Nun die delegation funktioniert, aber wir sind zu überschreiben Student.prototype mit der Person.prototype. Wenn wir also rufen Student.prototype.constructor es würde Punkt-zu - Person statt Student. Diese ist, warum wir brauchen, um es zu beheben.

//Now we fix what the .constructor property is pointing to    
Student.prototype.constructor = Student

//If we check instanceof here
console.log(eve instanceof Person) //true

In ES5, unsere constructor Eigenschaft ist eine Referenz auf eine Funktion, die wir geschrieben haben, mit der Absicht, ein 'Konstruktor'. Abgesehen von dem, was die new Schlüsselwort gibt uns der Konstruktor ist, ansonsten eine 'plain' - Funktion.

In ES6, die constructor jetzt gebaut wird, in der Art wie wir schreiben-Klassen - wie in, es ist als eine Methode, wenn wir deklarieren eine Klasse. Das ist einfach nur syntaktischer Zucker, aber es tut accord uns einige Annehmlichkeiten, wie den Zugang zu einem super wenn wir die Erweiterung einer vorhandenen Klasse. So würden wir schreiben die obige code wie folgt:

class Person {
  //constructor function here
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  //static getter instead of a static property
  static get species() {
    return 'human';
  }
}

class Student extends Person {
   constructor(name, age, school) {
      //calling the superclass constructor
      super(name, age);
      this.school = school;
   }
}

InformationsquelleAutor bthehuman

Dies ist die große Gefahr, dass, wenn Sie schrieb

Student.prototype.constructor = Student;

aber dann, wenn es einen Lehrer, dessen Prototyp war auch Mensch, und Sie schrieb

Teacher.prototype.constructor = Teacher;

dann die Student-Konstruktor ist jetzt Lehrer!

Bearbeiten:
Sie können dies vermeiden, indem Sie sicherstellen, dass Sie gesetzt hatten, die Schüler und Lehrer Prototypen mit neuen Instanzen von der Klasse "Person" erstellt mit dem Objekt.erstellen Sie, wie in der Mozilla-Beispiel.

Student.prototype = Object.create(Person.prototype);
Teacher.prototype = Object.create(Person.prototype);

InformationsquelleAutor James D

Habe einen schönen code-Beispiel dafür, warum es wirklich notwendig ist, um die Prototyp-Konstruktor..

function CarFactory(name){ 
   this.name=name;  
} 
CarFactory.prototype.CreateNewCar = function(){ 
    return new this.constructor("New Car "+ this.name); 
} 
CarFactory.prototype.toString=function(){ 
    return 'Car Factory ' + this.name;
} 

AudiFactory.prototype = new CarFactory();      //Here's where the inheritance occurs 
AudiFactory.prototype.constructor=AudiFactory;       //Otherwise instances of Audi would have a constructor of Car 

function AudiFactory(name){ 
    this.name=name;
} 

AudiFactory.prototype.toString=function(){ 
    return 'Audi Factory ' + this.name;
} 

var myAudiFactory = new AudiFactory('');
  alert('Hay your new ' + myAudiFactory + ' is ready.. Start Producing new audi cars !!! ');            

var newCar =  myAudiFactory.CreateNewCar(); //calls a method inherited from CarFactory 
alert(newCar); 

/*
Without resetting prototype constructor back to instance, new cars will not come from New Audi factory, Instead it will come from car factory ( base class )..   Dont we want our new car from Audi factory ???? 
*/

InformationsquelleAutor user3877965

BEARBEITEN, ich war tatsächlich falsch. Kommentieren Sie die Zeile aus, nicht verändern, es ist Verhalten überhaupt. (Habe es getestet)

Ja, es ist nötig. Wenn Sie das tun

Student.prototype = new Person();  

Student.prototype.constructor wird Person. Daher ruft Student() zurückkehren würde, ein Objekt erstellt, indem Person. Wenn Sie dann tun

Student.prototype.constructor = Student; 

Student.prototype.constructor ist wieder auf Student. Wenn Sie jetzt anrufen Student() es führt Student fordert die übergeordneten Konstruktor Parent() es gibt die richtig geerbte Objekt. Wenn Sie nicht zurücksetzen Student.prototype.constructor vor dem Aufruf die Sie erhalten würden, ein Objekt, das keine der Eigenschaften im Student().

InformationsquelleAutor invisible bob

Hier ist ein Beispiel von MDN, das fand ich sehr hilfreich, um zu verstehen, verwendet.

In JavaScript haben wir async-Funktionen gibt AsyncFunction Objekt. AsyncFunction ist nicht eine Globale Objekt-man kann Sie aber abrufen, indem mithilfe constructor Eigenschaft und verwenden Sie es.

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

//AsyncFunction constructor
var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor

var a = new AsyncFunction('a', 
                          'b', 
                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');

a(10, 20).then(v => {
  console.log(v); //prints 30 after 4 seconds
});

InformationsquelleAutor Hitesh Kumar