Vererbung der prototypischen Vererbung in JavaScript

Ich bin neu in JavaScript-OOP. Können Sie bitte erklären Sie den Unterschied zwischen folgenden code-Blöcke. Ich habe getestet und beide Blöcke arbeiten. Was ist die best practice und warum?

Ersten block:

function Car(name){
    this.Name = name;
}

Car.prototype.Drive = function(){
    document.write("My name is " + this.Name + " and I'm driving. <br />");
}

SuperCar.prototype = new Car();
SuperCar.prototype.constructor = SuperCar;

function SuperCar(name){
    Car.call(this, name);
}

SuperCar.prototype.Fly = function(){
    document.write("My name is " + this.Name + " and I'm flying! <br />");
}

var myCar = new Car("Car");
myCar.Drive();

var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();

Zweiten block:

function Car(name){
    this.Name = name;
    this.Drive = function(){ 
        document.write("My name is " + this.Name + " and I'm driving. <br />");
    }
}

SuperCar.prototype = new Car();

function SuperCar(name){
    Car.call(this, name);
    this.Fly = function(){
        document.write("My name is " + this.Name + " and I'm flying! <br />");
    }
}

var myCar = new Car("Car");
myCar.Drive();

var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();

Warum hat der Autor hinzufügen Drive und Fly Methoden mit prototypeaber nicht erklären, wie this.Drive Methode innerhalb Car Klasse und this.Fly im SuperCar Klasse?

Warum SuperCar.prototype.constructor eingestellt werden müssen, um wieder zu SuperCar? Ist die constructor-Eigenschaft überschrieben, wenn prototype eingestellt ist? Kommentierte ich aus dieser Zeile, und nichts hat sich geändert.

Warum nennen Car.call(this, name); im SuperCar Konstruktor? Nicht Eigenschaften und Methoden von Car werden 'vererbt', wenn ich

var myCar = new Car("Car");

InformationsquelleAutor der Frage Dasha Salo | 2009-05-21

79

Sich die beiden Blöcke unterscheiden sich in einer Weise, dass im ersten Beispiel Drive() nur einmal vorhanden sein, während beim zweiten Ansatz Drive() existiert pro Instanz (Jedes mal, wenn Sie new Car() die Funktion drive() neu erstellt). Oder anders gesagt, die erste verwendet den Prototyp zu speichern, die Funktion und die zweite Konstruktor. Die Suche nach Funktionen ist der Konstruktor und dann Prototyp. Also für Ihre Suche Drive() es findet, unabhängig davon, ob im Konstruktor oder in dem Prototyp. Mit dem Prototyp ist effizienter, da in der Regel benötigen Sie eine Funktion, die nur einmal pro Typ.

Den new - Aufruf in javascript stellt automatisch den Konstruktor der Prototyp. Wenn Sie das überschreiben der Prototyp so müssen Sie die Konstruktor manuell.

Vererbung in javascript hat nichts, wie super. Also, wenn Sie eine Unterklasse die einzige chance, den Aufruf des super-Konstruktors ist der name.

InformationsquelleAutor der Antwort Norbert Hartl
138

Hinzufügen Norbert Hartl AntwortSuperCar.der Prototyp.Konstruktor ist nicht nötig, aber einige Leute benutzen es als ein bequemer Weg, um der Konstruktion die Funktion eines Objekts (SuperCar-Objekte in diesem Fall).

Nur aus dem ersten Beispiel, dem Auto.call(this, name) ist in der SuperCar-Konstruktor-Funktion, da wenn Sie dies tun:
```
var mySuperCar = new SuperCar("SuperCar");
```
Dies ist, was JavaScript macht:
1. Ein frisches, leeres Objekt instanziiert wird.
2. Der frischen Objekts interner Prototyp festgelegt ist Auto.
3. Der Supersportwagen Konstruktor-Funktion ausgeführt wird.
4. Das fertige Objekt wird zurückgegeben und in mySuperCar.
Beachten Sie, wie JavaScript nicht rufen Sie Auto für Sie. Prototypen sein, wie Sie sind, any Eigenschaft oder Methode, dass Sie nicht setzen Sie sich für Supersportwagen gesucht im Auto. Das ist manchmal gut, z.B. SuperCar nicht über eine Drive-Methode, aber Sie können teilen sich den Wagen ein, so dass alle SuperCars auf dem selben Laufwerk-Methode. Andere Zeiten, die Sie nicht wollen, zu teilen, wie jeder Supersportwagen mit einem eigenen Namen. Also, wie geht man über die Einstellung jedes SuperCar Namen, um es der eigenen Sache? Sie setzen konnte.Namen in der SuperCar-Konstruktor-Funktion:
```
function SuperCar(name){
    this.Name = name;
}
```
Dies funktioniert, aber warten Sie eine Sekunde. Hatten wir nicht genau das tun die gleiche Sache in der Auto-Konstruktor? Nicht wollen, zu wiederholen. Da Auto-sets der name schon, nennen wir es einfach.
```
function SuperCar(name){
    this = Car(name);
}
```
Hoppla, wollen Sie sich nie ändern, die spezielle this Objekt-Referenz. Denken Sie daran die 4 Schritte? Hängen Sie auf das Objekt, das JavaScript gab Sie, weil es der einzige Weg, um den wertvollen internen Prototyp-Verbindung zwischen Ihrem Supersportwagen-Objekt und Fahrzeug. So wie wir setzen Namen, ohne uns selbst zu wiederholen und ohne wegwerfen unsere neue SuperCar-Objekt von JavaScript ausgegeben, so viel Besondere Mühe zu bereiten für uns?

Zwei Dinge. Ein: die Bedeutung von this ist flexibel. Zwei: das Auto ist eine Funktion. Es ist möglich, den Anruf zu dem Auto, nicht mit einer unberührten, frisch instanziierten Objekts, sondern mit, sagen wir, ein Supersportwagen-Objekt. Das gibt uns die endgültige Lösung, die ein Teil von dem ersten Beispiel in der Frage:
```
function SuperCar(name){
    Car.call(this, name);
}
```
Als eine Funktion, Auto darf aufgerufen werden, die mit der Funktion rufen Sie die Methodedas ändert die Bedeutung von this innerhalb Auto SuperCar-Instanz bauen wir auf. Presto! Nun, jeder Supersportwagen bekommt Ihren eigenen Namen-Eigenschaft.

Einpacken, Car.call(this, name) in der SuperCar-Konstruktor gibt jedem neuen Supersportwagen Objekt seine eigene einzigartige Name-Eigenschaft, aber ohne das duplizieren von code, der bereits im Auto.

Prototypen sind nicht beängstigend, sobald Sie Sie verstehen, aber Sie sind nicht viel wie die classic-Klasse/inheritence OOP-Modell überhaupt. Ich schrieb einen Artikel über das Prototypen-Konzept in JavaScript. Es ist geschrieben für eine Spiel-engine, die JavaScript verwendet, aber es ist die gleiche JavaScript-engine von Firefox, so sollte es alle relevanten. Hoffe, das hilft.

InformationsquelleAutor der Antwort Tung Nguyen
8

Norbert, sollten Sie beachten, dass Ihr erstes Beispiel ist ziemlich viel, was Douglas Crockford nennt pseudoclassical Vererbung. Etwas Dinge zu beachten, dazu:
1. Sie rufen die Auto-Konstruktor zweimal, einmal aus dem SuperCar.prototype = new Auto () - Zeile und die andere von der "Konstruktor stehlen" line Auto.rufen Sie(diese...Sie können erstellen eine helper-Methode zum Erben Prototypen statt und Ihr Auto-Konstruktor wird nur einmal ausgeführt, wodurch der setup effizienter.
2. Der Supersportwagen.der Prototyp.Konstruktor = SuperCar Linie erlaubt die Verwendung von instanceof zu identifizieren, die Konstruktor. Einige Leute wollen diese anderen nur vermeiden Sie die Verwendung von instanceof
3. Referenz vars wie: var arr = ['eins','zwei'], wenn definiert ist super (zB Auto) wird geteilt durch ALLE Instanzen. Dies bedeutet inst1.arr.drücken Sie['drei'], inst2.arr.drücken Sie['vier'], etc. die show wird für alle Instanzen! Im wesentlichen statische Verhalten, dass Sie wahrscheinlich nicht wollen.
4. Sie zweite block definiert den fly-Methode in den Konstruktor. Dies bedeutet, dass für jedes mal, dass es heißt, "method-Objekt" erstellt werden. Besser einen Prototyp für Methoden! Sie KÖNNEN jedoch halten Sie im Konstruktor, wenn Sie möchten, brauchen Sie nur zu bewachen, so dass Sie eigentlich nur initialisieren der Prototyp literal einmal (pseudo): wenn (Supersportwagen.der Prototyp.myMethod != 'Funktion')...dann definieren Sie Ihre Prototyp-literal.
5. "Warum rufen Sie Auto.call(this, name)....': Ich habe nicht die Zeit, sorgfältig zu prüfen, Ihren code so, ich kann falsch sein, aber dies ist in der Regel so, dass jede Instanz kann es halten den eigenen Zustand zu beheben, das 'staticy' Verhalten-Problem der Prototyp Verkettung, die ich oben beschrieben habe.
Schließlich möchte ich erwähnen, dass ich mehrere Beispiele von TDD JavaScript Vererbung von code, funktioniert hier: TDD JavaScript Vererbung von Code und Essay ich würde gerne Ihr feedback, wie ich hoffe, zu verbessern und zu halten es open source. Das Ziel ist zu helfen, klassische Programmierer erhalten Sie bis zu Geschwindigkeit, mit JavaScript schnell und auch die Ergänzung der Untersuchung sowohl Crockford und Zakas Bücher.

InformationsquelleAutor der Antwort Rob
1

Ich bin mir nicht 100% sicher, aber ich glaube, der Unterschied ist, dass das zweite Beispiel einfach dupliziert den Inhalt des Auto-Klasse in der SuperCar-Objekt, während die ersten Glieder der Supersportwagen-Prototyp auf der Auto-Klasse, so dass änderungen zur Laufzeit, um die Auto-Klasse Einfluss auf die SuperCar-Klasse als auch.

InformationsquelleAutor der Antwort Jeff Ober

function abc() {
}

Prototyp Methoden und Eigenschaften erstellt, die für die Funktion abc

abc.prototype.testProperty = 'Hi, I am prototype property';
abc.prototype.testMethod = function() { 
   alert('Hi i am prototype method')
}

Neue Instanzen erstellen für Funktion abc

var objx = new abc();

console.log(objx.testProperty); //will display Hi, I am prototype property
objx.testMethod();//alert Hi i am prototype method

var objy = new abc();

console.log(objy.testProperty); //will display Hi, I am prototype property
objy.testProperty = Hi, I am over-ridden prototype property

console.log(objy.testProperty); //will display Hi, I am over-ridden prototype property

http://astutejs.blogspot.in/2015/10/javascript-prototype-is-easy.html

InformationsquelleAutor der Antwort Jack Sane

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.