的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) 

工作，但返回false为什么我不能打电话flippy.voice？以及如何调用flippy.voice？

Answer 1

为什么我不能拨打flippy.voice？

因为flippy上没有voice，因为没有运行过任何代码可以创建它。

当获得在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"