Inheriting prototype functions in other objects in javascript

Question

I'm studying inheritance in javascript and I stumbled upon an issue regarding sharing prototypes functions. Here is my code that works:

function basicID(id,firstname,lastname){
    this.firstname=firstname;
    this.lastname=lastname;
}

basicID.prototype = {


    setFirstName:function(firstname){
        this.firstname=firstname;
  },
    setLastName:function(lastname){
        this.lastname=lastname;
  },
    getFirstName:function(){
        return this.firstname;
  },
    getLastName:function(){
        return this.lastname;
  }

};

If test this by

var empID = new basicID();
empID.setFirstName("Pink Panther");
alert(empID.getFirstName());

It works well.

Then I wanted to create a subclass of this basicID using the following..

function advancedID(id,firstname,lastname,address,picture,accesscode){

    basicID.call(this,id,firstname,lastname);
    this.address=address;
    this.picture = picture;
    this.accesscode= accesscode;
}

advancedID.prototype = basicID.prototype;

Then test this by...

var employeeID = new advancedID();
employeeID.setFirstName("Black Panther");
alert(employeeID.getFirstname())

And still works! But when i added the prototype functions such as this:

advancedID.prototype = {
        setAddress : function(address){
            this.address = address;
        },
        getAddress : function(address){
            return this.address;
        }
}

Then I test the advanceID's own function with

employeeID.setAddress("Metropolis");
alert(employeeID.getAddress())

and it didn't work! I suspect the line

advancedID.prototype = basicID.prototype;

For the errors. Since It changes the prototype object of that particular object. How can I inherit both functions from the basicID and advancedID at the same time?

When you do `advancedID.prototype = basicID.prototype;` you're completely replacing the prototype, so it no longer has its own prototype. — Barmar, Mar 21 '18 at 16:22
`advancedID.prototype = {…}` doesn't "add" anything. It overwrites. — Bergi, Mar 21 '18 at 16:22
Not related to the problem, but what's the point of the statements in the `basicID` constructor? Did you mean `this.firstname = firstname;`? — Barmar, Mar 21 '18 at 16:23
It's a constructor type of setting values I supposed. Instead of calling getter functions @Barmar — cattarantadoughan, Mar 21 '18 at 16:28
`this.firstname;` doesn't do anything, it doesn't set any values. — Barmar, Mar 21 '18 at 16:32
I'm sorry there's been a typo, it should be this.firstname = firstname. You're right! — cattarantadoughan, Mar 21 '18 at 17:00

Oscar Paz · Accepted Answer · 2018-03-21T19:28:42.393

0

Well, you're not getting prototype inheritance well, but first things first:

When you do:

advancedID.prototype = {
    setAddress : function(address){
        this.address = address;
    },
    getAddress : function(address){
        return this.address;
    }
}

You're replacing the entire prototype of advancedID with this object. So advancedID and basicID no longer share the prototype. basicID.prototype is still the original one, but advancedID's changed.

If you want to add properties to the prototype, you should append:

advancedID.prototype.getAddress = function() {...}

Now you'll see that you keep the previous methods.

However, you'll see that if you do:

empID.getAddress();

You don't get an error. Your intention was for advancedID to inherit from basicID, but, in truth, now they both share the prototype. Any change to one, reflects in the other.

The correct way to make a 'class' inherit from another, is:

advancedID.prototype = Object.create(basicID.prototype);

This causes that:

Object.getPrototypeOf(advancedID.prototype) === basicID.prototype.

If you augmente basicID's prototype, advancedID will get the new methods, but the inverse situation won't happen.

edited Mar 21 '18 at 19:28

answered Mar 21 '18 at 16:23

Oscar Paz

18,084
3
27
42

"*This causes that `advancedID.prototype.prototype === basicID.prototype`.*" - [No](https://stackoverflow.com/q/9959727/1048572). I think you mean that `Object.getPrototypeOf(advancedID.prototype) === basicID.prototype`. – Bergi Mar 21 '18 at 16:25
Yes, you're right! – Oscar Paz Mar 21 '18 at 16:28
Hi thanks for the answer but I'm confused with `advancedID.prototype = Object.create(basicID);` you're putting basicID as a parameter for Object.create method. I manage to make it work by calling `advancedID.prototype = Object.create(basicID.prototype);` – cattarantadoughan Mar 21 '18 at 19:14
Yes, I forgot about the `prototype` part in `Object.create()`. – Oscar Paz Mar 21 '18 at 19:30
Hi, again thanks for the answer. I just want to ask a semi related question regarding my above code. Where do you think I can use `prototype.constructor` or `constructor` in the conditions similar to my original codes? Maybe another object making or in the concept of inheritance @OscarPaz – cattarantadoughan Mar 22 '18 at 21:11

Inheriting prototype functions in other objects in javascript

1 Answers1