javascript - 变量属性的继承

Question

来自 codeacademy 的练习:

function Penguin(name) {
    this.name = "Pingy";
    this.numLegs = 2;
}

// create your Emperor class here and make it inherit from Penguin
function Emperor (name){
    this.name = name;
}
Emperor.prototype = new Penguin();
var emp = new Emperor("Empy");

所以我让 Emperor 继承了 Penguin 的属性，现在我知道 emp.numLegs 将为 2。

阅读评论后我编辑了问题:如您所见，我在创建 emp 时给了一个名字，而 emp.name 确实是我的新 emp 的名称，即“Empy”。但是从 Penguin 类构造函数继承的 name 呢？它去了哪里？

Answer 1

Codecademy 是初学者学习 JavaScript 的绝佳途径。学习任何编程语言都需要练习，而 Codecademy 让您练习。

然而，有时您需要超越实践范围并学习一些理论。阅读以下答案。它很好地解释了 JavaScript 中的原型(prototype)继承:https://stackoverflow.com/a/8096017/783743

现在你有一个 Penguin 构造器，如下所示:

function Penguin(name) {
    this.name = name;
    this.numLegs = 2;
}

然后你创建一个继承自 Penguin 的 Emperor 构造函数:

function Emperor(name) {
    this.name = name;
}

Emperor.prototype = new Penguin();

请注意，您正在创建 Penguin 实例并将其分配给 Emperor.prototype。因此:

1. Emperor.prototype.name = undefined - 这是因为您没有将任何 name 传递给 Penguin 构造函数。如果我写的是 Emperor.prototype = new Penguin("Empy")，那么 Emperor.prototype.name 将是 "Empy"。
2. Emperor.prototype.numLegs = 2 - 显然。

现在当你创建一个新的 Emperor 时，你需要给构造函数一个名字(记住你是从 Penguin 继承 undefined > 作为名称)。因此:

var emp = new Emperor("Empy");

那是老派的方法。

现在的 JavaScript 程序员使用 Object.create 和 call 来继承另一个构造函数。让我用一个例子来解释:

function Emperor(name) {
    Penguin.call(this, name);
}

Emperor.prototype = Object.create(Penguin.prototype);
Emperor.prototype.constructor = Emperor;

与旧学校方法相比，此方法有几个优点:

1. 我们没有使用 new Penguin() 创建 Penguin 的新实例并且不向其传递参数，而是继承了 Penguin 的原型(prototype)成员> 使用 Object.create(Penguin.prototype)。这也可以防止在实际调用派生构造函数之前对基构造函数进行不必要的初始化。
2. 我们不再在派生构造函数中编写 this.name = name，而是使用 Penguin.call(this, name) 为我们调用基础构造函数。这种模式称为混入，如果基础构造函数需要在运行时初始化或需要维护其自身的状态信息，则该模式非常有用。

请注意，我们还添加了一个附加语句 Emperor.prototype.constructor = Emperor。这是因为 prototype 是一个非常特殊的属性，它存在于所有函数上。它指向一个对象，该对象具有非常特殊的 constructor 属性，该属性指向函数本身。通过将 Emperor.prototype 设置为其他内容，我们将失去此属性。因此，我们再次设置它。

这两个示例中的净效果是相同的。然而，对于更复杂的代码，使用新方法要好得多。快乐学习 JavaScript。