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)

此版本重新启动并返回＆＃34; Miau＆＃34;但第二个版本

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中派生构造函数时，从子构造函数中调用super的构造函数非常重要：

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语法（如果有必要，可以在较旧的目标环境中进行转换）来简化：

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

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

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

JavaScript Prototype Object.create

1 个答案: