JavaScript 原型(prototype) 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

Why I cant call flippy.voice?

因为 flippy 上没有voice，因为从来没有运行过创建它的代码。

在 JavaScript 中派生构造函数时，从子构造函数调用父构造函数很重要:

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

如果这样做，Animal 中的代码就会运行，并且该实例将具有 voice 属性。

注意:修复 Cat.prototype 上的 constructor 属性也很有用:

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 语法(必要时为较旧的目标环境进行转译)来简化:

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

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

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