Javascript: array member variable not working as instance variable in prototypical inheritance

Question

I am trying to use javascript inheritance in my code. Following is the jsfiddle for the same. http://jsfiddle.net/Fetsz/3/

var baseObject = Object.create(Object, {  
    // this works as an instance variable for derived objects  
    name: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: null    
    },   
    // this should act as instance variable for derived objects   
    values: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: []    
    },
    displayAlert: {
        value: function (){
            alert("Alert from base object");
        }
    }
});

var derivedObj1 = Object.create(baseObject, {});    
var derivedObj2 = Object.create(baseObject, {});    

function displayValues (obj) {
    alert("values for " + obj.name + "\n" + JSON.stringify(obj.values));
};

$(document).ready(function(){
    derivedObj1.name = "Object 1";
    derivedObj2.name = "Object 2";

    derivedObj1.values.push("DO1 element");
    derivedObj2.values.push("DO2 element");

    derivedObj1.displayAlert();

    // should display values added only for derivedObj1
    displayValues(derivedObj1);

    // should display values added only for derivedObj2
    displayValues(derivedObj2);
});

I also checked following question which nicely explains why my code doesn't work. Javascript Inheritance: Parent's array variable retains value

I need to have an array member variable in every derived class which will contain certain values. I was trying to achieve the same by adding array in base class. As mentioned in above question, to achieve the same, I will have to add array member to each derived class. Is there any other way to achieve this without modifying every derived class?

Asad Saeeduddin · Answer 1 · 2012-12-27T14:05:30.823

When they are created, both derivedObj1.values and derivedObj2.values point to the same array object. If you were to first reassign each one using derivedObj1.values = [];, in the same way as you are reassigning the name property, your code would behave as expected.

Instead of adding the values property to the original baseObject, you could create an init method that adds an array to the instance:

var baseObject = Object.create(Object, {  
    // this works as an instance variable for derived objects  
    name: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: null    
    },   
    // this should act as instance variable for derived objects   
    init: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: function(){
            this.values = [];
        }
    },
    displayAlert: {
        value: function (){
            alert("Alert from base object");
        }
    }
});

var derivedObj1 = Object.create(baseObject, {});
derivedObj1.init();
var derivedObj2 = Object.create(baseObject, {});
derivedObj2.init();

Thanks Asad. In my code, property lists supplied while creating derived objects already contain init method. Still I think changes will be minimal if I try to add a method in baseObject and have it called for every object. I am going to give it a try and test now. — Nilesh, Dec 27 '12 at 14:26

score 1 · Accepted Answer · answered Dec 27 '12 at 14:06

1

Your variables can't be on the prototype if you don't want them to be shared by all instances. You could create a second object with just the property definition for the array,and pass it as the second parameter to Object.create:

var arrDef = {
        values: {
            writable: true,
            configurable: true,
            enumerable: true,
            value: []
        }
}
var derivedObj1 = Object.create(baseObject, arrDef);    
var derivedObj2 = Object.create(baseObject, arrDef);

answered Dec 27 '12 at 14:06

bfavaretto

71,580
16
111
150

Thanks. This will solve my issue. Only problem is I already have good number of derived objects along with long property list. Implementing this would mean changes at a lot of places in the code. I am trying to find out a method to achieve it with minimal changes. – Nilesh Dec 27 '12 at 14:21
@Nilesh In this case it would be very simple if you were using the "pseudo-classical" inheritance pattern; then all you'd have to do would be adding a new property from the constructor. – bfavaretto Dec 27 '12 at 15:16
pseudo-classical pattern did the job for me. Though the changes were not minimal, it seemed like right way to do this. – Nilesh Dec 28 '12 at 13:32

Javascript: array member variable not working as instance variable in prototypical inheritance

2 Answers2