使用 Object.create() 复制构造函数和 new

Question

根据我对 OOP javascript 的有限经验，处理具有不同属性但相同方法的多个对象的常用方法是使用如下构造函数：

function Animal ( type ) {
    this.type = type
};
Animal.prototype.sayHello = function () {
    return 'Hi, I am a ' + this.type
};
var goat = new Animal( 'Goat' );

我这里的理解是goat会继承/引用Animal的功能。

我假设我可以使用以下对象字面量概念复制上述内容：

var Animal = {
    type : '',
    sayHello : function () {
        return 'Hi, I am a ' + this.type
    }
}
var goat = Object.create( Animal );
goat.type = 'Goat';

对Animal 的继承在这里丢失了，还是Goat 仍然引用Animal 的方法？

我想知道使用Object.create() 而不是new 复制构造函数/类是否有任何问题。是否有性能偏移或任何理由继续使用new？

任何建议都将不胜感激，如果需要澄清，我很乐意补充问题。

更新对象创建

var Animal = {
    sayHello : function () {
        return 'Hi, I am a ' + this.type
    }
}
var goat = Object.create( Animal, { 'type' : { value: 'goat' } } );

Answer 1

...处理具有不同属性但相同方法的多个对象的常用方法是使用构造函数...

是的，另一种常见的方式是（如您所见）Object.create。

我这里的理解是goat会继承/引用Animal的功能。

不完全是。在new Animal 表达式中，goat 被分配Animal.prototype 引用的对象作为其底层原型。与Animal 没有直接 连接，仅与Animal.prototype 连接。 （在正常情况下，Animal.prototype 通过其constructor 属性引用回Animal，尽管如果有人将新对象分配给Animal.prototype，则该链接可能会断开。）

对Animal 的继承在这里丢失了，还是Goat 仍然引用Animal 的方法？

在您的非构造函数示例中，goat 将 Animal 作为其底层原型，因此对于在 goat 本身上找不到的任何属性，JavaScript 引擎将查看 Animal 以查看是否 有。在您的示例中，这意味着goat 使用的是来自Animal 的sayHello，但不是type，因为goat 有自己的type。

大致相当于：

function Animal ( type ) {
    this.type = type
};
Animal.prototype.sayHello = function () {
    return 'Hi, I am a ' + this.type
};
var goat = new Animal( 'Goat' );

...使用Object.create 设置原型改为如下所示：

var animalPrototype = {
    sayHello: function () {
        return 'Hi, I am a ' + this.type
    }
};
function createAnimal(type) {
    var rv = Object.create(animalPrototype);
    rv.type = type;
    return rv;
};
var goat = createAnimal( 'Goat' );

---

你的评论：

会不会有任何问题，包括animalPrototype 在createAnimal 中，然后调用Object.create(this.animalPrototype)？

如果你是这个意思：

function createAnimal(type) {
    var animalPrototype = {                       // Issue #1
        sayHello: function () {
            return 'Hi, I am a ' + this.type
        }
    };
    var rv = Object.create(this.animalPrototype); // Issue #2
    rv.type = type;
    return rv;
};
var goat = createAnimal( 'Goat' );

...那么是的，有两个问题：

1. 您将为每次调用 createAnimal 创建一个新 animalPrototype，这违背了目的，并且 2. this 在对 createAnimal 的调用中要么是全局的对象（松散模式）或undefined（严格模式），所以this.animalPrototype 可能不是您想要的表达式。

你可以这样做：

function createAnimal(type) {
    var rv = Object.create(createAnimal.proto);
    rv.type = type;
    return rv;
};
createAnimal.proto = {
    sayHello: function () {
        return 'Hi, I am a ' + this.type
    }
};
var goat = createAnimal( 'Goat' );

当然，这可能会让人们感到困惑，因为它看起来很像构造函数。