JavaScript简单原型继承

Question

我正在控制台里尝试理解原型继承。我熟悉经典继承，但在我的JS工作中从未使用过任何继承。

如果我有：

var foo = {
    cat: "oliver"
}

var bar = Object.create(foo);

foo.prototype = {
    dog: "rover"
}

当我执行以下操作时：

dir(bar.dog)

或者

dir(foo.dog)

我希望看到rover，但它们都返回为undefined。

我错过了什么？

提前致谢。

- user154759

---

我猜我会感到困惑的地方在于：原型属性只能用于已实例化的对象（函数），但是Object.create却能将对象字面量作为原型使用？或者这种模式只适用于构造函数？ - user154759

你不能在对象实例（如foo对象字面量）上设置原型，并期望它像在函数上设置原型一样工作。你所做的只是在foo上添加了一个名为prototype的属性，但JS运行时不会使用它来查找。David给出了最正确的答案。有关原型的更多信息，请参见：https://dev59.com/J2Qo5IYBdhLWcg3wbe5K#16063711 - HMR

Answer 1

您看到这个是因为这一行：

foo.prototype = {
    dog: "rover"
}

您创建对象后无法更改其原型。但您可以像这样修改现有原型:

foo.dog = "rover";

请记住，foo 是 bar 的原型。

- Ibrahim Najjar

Answer 2

原型成员只有在实例化后才可用。像“静态”属性一样，foo.cat是可用的（来自具有此类代码支持的语言，例如PHP）。此外，在执行Object.create时，应从foo原型继承。

var foo = function(){ };
foo.cat = "oliver";

var bar = Object.create(foo.prototype);

foo.prototype.dog = "rover";

console.log(bar.dog); // yields "rover", modifying the prototype of "foo" alter the members of "bar" instance

- pocesar

Answer 3

这是实现您所尝试的正确代码:

var foo = Object.create({dog:'rover'});

foo.cat = 'oliver';

var bar = Object.create(foo);

这样，foo 从一个名为 dog 的属性的对象继承，然后 bar 也从同一个对象继承，因为它继承自 foo。

现在，检查 bar.dog 和 bar.cat，分别输出 rover 和 oliver。

请注意，.prototype 只能用于访问或设置函数的原型对象，你在那段代码中做的是错误的，这才是正确的：

var a = function(){
}

a.prototype = {};

要访问对象的原型，您需要像这样操作：

a = {};

a.\__proto__.foo = 'bar';

然而，这允许您获取或设置该原型对象的属性，但不能将其替换为其他对象。

- David V