Question

I am struggling with a subject I previously thought I understood – prototypal inheritance in JavaScript.

I have a jsfiddle which outlines my problem here

I have a base object and an inheriting implementation. I want the implementation to make changes to the base’s properties, and for the base to access these updated properties.

Can anyone please point out where I’m going wrong?

Answer 1

The value of this when you call new cheeseBase() is the object you’re using as the prototype from inside “cheddar()”, and not the instance of “cheddar”. Thus, the “saySomething()” function always says “all cheese” because it refers to the “captured” this from the constructor call.

If you change “saySomething()” to reference “this.favoriteCheese” in the “alert()” call, it says “cheddar” in the popup.

If you really want the subclass to be modifying the base object, alternatively, you could rearrange:

function cheesebase() {

    var that = this;

    this.favouriteCheese = "all cheese";

    this.setBaseCheese = function(chz) {
      that.favouriteCheese = chz;
    };

    this.saySomething = function() {
        alert("My favourite cheese is " + that.favouriteCheese);
    };
}

function cheddar() {

    var returnObject = Object.create(new cheesebase());

    returnObject.setBaseCheese("cheddar");

    returnObject.saySomethingElse = function() {
        alert("I like cheese");
    };

    return returnObject;
}