JavaScript Прототип Object.create

Question

Я две версии кода

let Animal = function() 
    { 

    } 

    Animal.prototype.voice = "Miau" 


    let Cat = function() 
    { 

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

    let flippy = new Cat(); 

    console.log(flippy.voice) 

Эта версия vorked и вернуть «Miau», но вторая версия

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


let Cat = function() 
{ 

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

let flippy = new Cat(); 

console.log(flippy.voice) 

работал, но вернуться ложным Почему я не могу назвать flippy.voice? и как назвать flippy.voice?

Answer 1

Почему я не могу позвонить flippy.voice?

Поскольку нет voice на flippy, потому что код никогда не запускались, что бы его создали.

При выводе конструкторов в JavaScript, это важно вызвать конструктор супер от конструктора подлодки:

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

Если вы сделаете это, то код в Animal запускаются, и экземпляр будет иметь voice недвижимости ,

Примечание: Это также полезно, чтобы зафиксировать вверх constructor собственности на Cat.prototype:

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

---

Тем не менее, имея Animal установить voice к "Miau" ... кажется неправильным. Может быть, принять это в качестве аргумента?

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" 

---

Конечно, здесь в 2017 году, вы можете использовать class синтаксис (transpiling если это необходимо для более старых целевых сред) для упрощения:

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

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

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