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?

Answer 1

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.