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＆＃34;继承＆＃34;与其他语言（至少在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。

与Javascript继承混淆

2 个答案: