JavaScript Prototype Object.create

Question

J'ai deux versions de code

    let Animal = function()
    {

    }

    Animal.prototype.voice = "Miau"

    let Cat = function()
    {

    }
    Cat.prototype = Object.create(Animal.prototype);

    let flippy = new Cat();

    console.log(flippy.voice)

Cette version a fonctionné et a renvoyé "Miau" mais la deuxième version

let Animal = function()
{
   this.voice = "Miau"
}

let Cat = function()
{

}
Cat.prototype = Object.create(Animal.prototype);

let flippy = new Cat();

console.log(flippy.voice)

A fonctionné mais renvoie faux Pourquoi je ne peux pas appeler flippy.voice? et comment appeler flippy.voice?

Answer 1

Pourquoi je ne peux pas appeler flippy.voice?

Parce qu'il n'y a pas de voice sur flippy, car aucun code n'a jamais été exécuté qui l'aurait créé.

Lors de la dérivation des constructeurs en JavaScript, il est important d'appeler le constructeur de la super classe depuis le constructeur de la sous-classe:

let Cat = function() {
    Animal.call(this); // <====
};

Si vous le faites, alors le code dans Animal est exécuté, et l'instance aura une propriété voice.

Remarque : Il est également utile de corriger la propriété constructor de Cat.prototype:

let Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat; // <===

---

Cela dit, le fait d'avoir Animal définir la voice à "Miau" semble... incorrect. Peut-être l'accepter en tant qu'argument?

let Animal = function(voice) {
    this.voice = voice;
};

let Cat = function() {
    Animal.call(this, "Miau");
};

let Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

let flippy = new Cat();
console.log(flippy.voice); // "Miau"

---

Bien sûr, ici en 2017, vous pouvez utiliser la syntaxe class (en transpilant si nécessaire pour les environnements cibles plus anciens) pour simplifier:

class Animal {
    constructor(voice) {
        this.voice = voice;
    }
}

class Cat extends Animal {
    constructor() {
        super("Miau");
    }
}

let flippy = new Cat();
console.log(flippy.voice); // "Miau"