Basic JavaScript Prototyp und Vererbung Beispiel für Tiere

Question

Ich versuche OOP mit JavaScript mit sehr einfachen Beispielen zu erfassen.

Mein Ziel ist es, eine Klassenhierarchie mit Tieren als Beispiel zu erstellen.

In einer vereinfachten Tiere Hierarchie können wir etwas sehen:

  Animal 
      /\ 
    Mammal  Reptile 
     /\   /\ 
    Human Dog Snake Alligator 

ich dieses Beispiel nehmen will und erstellen Klassen in JavaScript. Hier ist mein Versuch. Was kann ich tun, um es besser zu machen?

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

function Mammal() { 
    this.hasHair = true; 
    this.numEyes = 2; 
    this.blood = "warm"; 
} 

function Dog(breed) { 
    this.breed = breed; 
    this.numLegs = 4; 
} 

Dog.prototype = new Animal("Fido"); 
Dog.prototype = new Mammal(); 

var Fido = new Dog("Lab"); 

console.log(Fido.name); // returns undefined when i want it to return Fido 
console.log(Fido.hasHair); // returns true as expected 
console.log(Fido.breed); // returns lab as expected 

Was würde ich tun möchte, ist haben Hund die Eigenschaften von Säugetier und Tier verlängern, da sie beide, aber es ist nicht richtig funktioniert. Ich gehe davon aus, dass ich dog.prototype = new Mammal() nach new Animal() anrufe, dass es die Verbindung überschreibt.

Wie schreibe ich diese Klassen richtig aus, damit ich alle Eigenschaften ihrer Elternklassen aufrufen kann?

Vielen Dank.

Answer 1

Sie möchten die prototypische Vererbung verwenden, die in Javascript ein wenig peinlich aber mächtig ist.

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

// Example method on the Animal object 
Animal.prototype.getName = function() { 
    return this.name; 
} 

function Mammal(name, hasHair) { 
    // Use the parent constructor and set the correct `this` 
    Animal.call(this, name); 

    this.hasHair = hasHair; 
} 

// Inherit the Animal prototype 
Mammal.prototype = Object.create(Animal.prototype); 

// Set the Mammal constructor to 'Mammal' 
Mammal.prototype.constructor = Mammal; 

Mammal.prototype.getHasHair = function() { 
    return this.hasHair; 
} 

function Dog(name, breed) { 
    // Use the parent constructor and set the correct `this` 
    // Assume the dog has hair 
    Mammal.call(this, name, true); 

    this.breed = breed; 
} 

// Inherit the Mammal prototype 
Dog.prototype = Object.create(Mammal.prototype); 

// Set the Dog constructor to 'Dog' 
Dog.prototype.constructor = Dog; 

Dog.prototype.getBreed = function() { 
    return this.breed; 
} 

var fido = new Dog('Fido', 'Lab'); 

fido.getName(); // 'Fido' 
fido.getHasHair(); // true 
fido.getBreed(); // 'Lab' 

Eine gute Quelle in Javascript OOP auf Mozilla Developer Network