TLDR; Non super necessario, ma probabilmente aiuterà a lungo termine, ed è più preciso farlo.
NOTA: Molto modificato in quanto la mia risposta precedente è stata scritta in modo confuso e presentava alcuni errori a cui ho perso la fretta di rispondere. Grazie a coloro che hanno segnalato alcuni errori eclatanti.
Fondamentalmente, si tratta di collegare correttamente la sottoclasse in Javascript. Quando effettuiamo la sottoclasse, dobbiamo fare alcune cose funky per assicurarci che la delegazione prototipo funzioni correttamente, inclusa la sovrascrittura di un prototypeoggetto. La sovrascrittura di un prototypeoggetto include il constructor, quindi è necessario correggere il riferimento.
Vediamo rapidamente come funzionano le "classi" in ES5.
Supponiamo che tu abbia una funzione di costruzione e il suo prototipo:
//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',
}
Quando chiami il costruttore per creare un'istanza, dì Adam:
// instantiate using the 'new' keyword
var adam = new Person('Adam', 19);
La newparola chiave invocata con "Person" eseguirà sostanzialmente il costruttore Person con alcune righe di codice aggiuntive:
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
* }
*/
Se noi console.log(adam.species), la ricerca fallirà adamnell'istanza, e cercheremo la catena prototipo alla sua .prototype, che è Person.prototype- e Person.prototype ha una .speciesproprietà, quindi la ricerca riuscirà Person.prototype. Quindi registrerà 'human'.
Qui, Person.prototype.constructorindicherà correttamente Person.
Quindi ora la parte interessante, la cosiddetta "sottoclasse". Se vogliamo creare una Studentclasse, che è una sottoclasse della Personclasse con alcune modifiche aggiuntive, dovremo assicurarci che i Student.prototype.constructorpunti a Studente siano precisi.
Non lo fa da solo. Quando si esegue la sottoclasse, il codice è simile al seguente:
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: {}
Chiamare new Student()qui restituirebbe un oggetto con tutte le proprietà che vogliamo. Qui, se controlliamo eve instanceof Person, ritornerebbe false. Se proviamo ad accedere eve.species, ritornerebbeundefined .
In altre parole, dobbiamo collegare la delega in modo che eve instanceof Personritorni vero e che le istanze del Studentdelegato siano correttamente Student.prototypee quindi Person.prototype.
MA poiché lo chiamiamo con la newparola chiave, ricordi cosa aggiunge quell'invocazione? Si chiamerebbe Object.create(Student.prototype), ed è così che abbiamo creato quella relazione delegativa tra Studente Student.prototype. Si noti che in questo momento, Student.prototypeè vuoto. Quindi cercare .speciesun'istanza di Studentfallirebbe in quanto delega solo Student.prototype e la .speciesproprietà non esisteStudent.prototype .
Quando lo assegniamo Student.prototypea noi stessi Object.create(Person.prototype), Student.prototypepoi si delega Person.prototypee guardando in alto eve.speciestornerà humancome ci aspettiamo. Presumibilmente vorremmo che ereditasse da Student.prototype AND Person.prototype. Quindi dobbiamo risolvere tutto ciò.
/* 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);
Ora la delegazione funziona, ma stiamo sovrascrivendo Student.prototypecon un di Person.prototype. Quindi, se chiamiamo Student.prototype.constructor, indicherebbe Personinvece di Student. Questo è il motivo per cui dobbiamo ripararlo.
// 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, la nostra constructorproprietà è un riferimento che si riferisce a una funzione che abbiamo scritto con l'intento di essere un "costruttore". A parte ciò che newci fornisce la parola chiave, il costruttore è altrimenti una funzione "semplice".
In ES6, constructorora è integrato nel modo in cui scriviamo le classi - come in, viene fornito come metodo quando dichiariamo una classe. Questo è semplicemente zucchero sintattico, ma ci concede alcune comodità come l'accesso a una superquando stiamo estendendo una classe esistente. Quindi scriveremo il codice sopra in questo modo:
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;
}
}