Confusion With Javascript Inheritance

Question

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?

Note: It's Object.create, not object.create.

Felix Kling
– Felix Kling

2016-09-09 18:36:52 +00:00
Commented Sep 9, 2016 at 18:36 — Felix Kling
– Felix Kling, Commented Sep 9, 2016 at 18:36
Thanks @melpomene for the edits

Geeky
– Geeky

2016-09-09 20:18:13 +00:00
Commented Sep 9, 2016 at 20:18 — Geeky
– Geeky, Commented Sep 9, 2016 at 20:18

Community · Accepted Answer · 2017-05-23 10:32:31Z

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

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Sep 9, 2016 at 18:31

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Geeky Over a year ago

Is this approach called as constructor stealing? .For inheritance, in javascript we should do a combination of prototypal and constructor stealing..Please correct me if iam wrong

Felix Kling Over a year ago

@Geeky: I have never heard of that. But it's the same as calling super() in other languages (and ES6). Having to call the parent constructor is pretty typical for inheritance.

Andrew Moore · Accepted Answer · 2016-09-09 19:07:47Z

0

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 .

edited Sep 9, 2016 at 19:07

answered Sep 9, 2016 at 18:41

Andrew Moore

1591 silver badge7 bronze badges

5 Comments

Felix Kling Over a year ago

This won't work, you have to call super(this) in the child constructor.

Andrew Moore Over a year ago

True, I had forgotten the super(this). I updated the answer.

marzelin Over a year ago

should be constructor(firstname, lastname) { super(firstname, lastname)

Felix Kling Over a year ago

Oh whoops, yeah no need to pass this.

Andrew Moore Over a year ago

That's right, the arguments must be the same as for the parent constructor. Thanks. I'm a little new to js inheritance, as well.

Collectives™ on Stack Overflow

Confusion With Javascript Inheritance

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related