与 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

What changes has to be done to access these variables?

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

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

JavaScript "inheritance" 比其他语言（至少在 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 中 class 声明的更多细节：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes .

与 Javascript 继承混淆

Confusion With Javascript Inheritance

javascript

javascript-inheritance