Confusion With Javascript Inheritance

人走茶凉 提交于 2019-12-24 06:01:38

问题


I'm confused about javascript inheritance.

Consider the following code:

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();

Now, does the child1 object have access to the firstname and lastname properties? I can access the Greetings method (because it's in the prototype). If I try to access these, it is showing as undefined. What changes have to be made to access these variables?


回答1:


What changes has to be done to access these variables?

You have to call the parent constructor in the child constructor:

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

JavaScript "inheritance" is a lot less magical (i.e. implicit) than in other languages (before ES6 classes at least).

In your example you have a function parent which sets two properties on this. However, nowhere in your code are you calling parent, so these properties will never be set.

In order to set them we need to apply parent to the new child instance, which is done by calling parent.call(this);.

Since parent accepts arguments, you probably want to pass them through child eventually:

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

Related: Benefits of using `Object.create` for inheritance




回答2:


A better way to do this is using more recent ES2015 standards. The syntax is much clearer to follow. Do something like:

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();

Info on ES2015 can be found at https://babeljs.io/docs/learn-es2015/ . Also, more specifics on class declarations in javascript can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes .



来源:https://stackoverflow.com/questions/39417710/confusion-with-javascript-inheritance

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!