与 Javascript 继承混淆

Question

我对 javascript 继承感到困惑。

考虑以下代码：

function parent(firstname, lastname) {
    this.firstname = firstname || "abc";
    this.lastname = lastname || "def";
}

function child() {
   this.childname = "xys";
}
parent.prototype.Greetings = function () {
    alert("sayhi");
}
child.prototype = Object.create(parent.prototype);
var child1 = new child();

现在，child1 对象是否可以访问 firstname 和 lastname 属性？ 我可以访问Greetings 方法（因为它在原型中）。 如果我尝试访问这些，它会显示为undefined。 必须进行哪些更改才能访问这些变量？

Answer 1

要访问这些变量需要做哪些更改？

你必须在子构造函数中调用父构造函数：

function child() {
  parent.call(this);
  this.childname = "xys";
}

---

JavaScript“继承”比其他语言（至少在 ES6 类之前）没有那么神奇（即隐式）。

在您的示例中，您有一个函数parent，它在this 上设置两个属性。但是，您的代码中没有任何地方调用 parent，因此永远不会设置这些属性。

为了设置它们，我们需要将parent 应用到新的child 实例，这是通过调用parent.call(this); 来完成的。

由于parent 接受参数，您可能希望最终通过child 传递它们：

function child(firstname, lastname) {
  parent.call(this, firstname, lastname);
  this.childname = "xys";
}

---

相关：Benefits of using `Object.create` for inheritance

Answer 2

更好的方法是使用更新的 ES2015 标准。语法更清晰易懂。执行以下操作：

class Parent {
    constructor(firstname, lastname) {
        this.firstname = firstname || "abc";
        this.lastname = lastname || "def";
    }
    greetings() {
        alert("sayhi");
    }
}

class Child extends Parent {
    constructor(){
        super(firstname, lastname);
        this.childname = "xys";
    }
}
var child1 = new child();

关于 ES2015 的信息可以在 https://babeljs.io/docs/learn-es2015/ 找到。 此外，更多关于 javascript 中的类声明的细节可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes。