Question

So I have a bug in some JavaScript code that has been driving me moderately crazy. I’ve been trying to mimic classical inheritance in JavaScript (I know, I know, half the posts I read on here say not to twist JavaScript into such a framework, but my application needs to have a client-side heirarchy that maps to the inheritance structure of my server-side php code). And mostly, it looks like everything is working. Here’s the function I’m using to extend classes:

Function.prototype.inheritsFrom = function(parentClass) {
//:: Ordinary Classes
if (parentClass.constructor == Function) {
    this.prototype             = new parentClass();
    this.prototype.constructor = this;
    this.prototype.parent      = parentClass.prototype;

//:: Abstract Classes
} else {
    this.prototype             = parentClass;
    this.prototype.constructor = this;
    this.prototype.parent      = parentClass;
}
return this;
}

Not my own creation, I found it online, but it works well. The only thing I needed to add was a “super” function to search the prototype chain for parent methods; the parent construct in the aforementioned code doesn’t work in every case.

In any case, as I’ve been ironing out some bugs in my code, I found that one of the methods in my base “class” is accessing/modifying the same variable for all instances created from all of its subclasses. In other words, whenever one instance modifies this variable which should be local to its object context, it in fact modifies some variable that is shared between all instances. Here’s the base class:

    function DataManipulatorControl() {
    //|| Private Members ||//

    var that = this;



    //|| Properties ||//

    //|| Root ID
    this.rootID = function(value) {
        if (value !== undefined) {
            if (_root_id !== null) {
                alert('@ ' + _root_id);
                $('#' + _root_id).prop('js_object', null);
            }
            _root_id = value;
            $('#' + _root_id).prop('js_object', this);
        }
        return _root_id;
    }
    var _root_id = null;

    // other properties/methods
}



//|| Class: DataManipulatorContainerControl
function DataManipulatorContainerControl() {
    //|| Private Members ||//

    var that = this;


    // subclass properties/methods
}
DataManipulatorContainerControl.inheritsFrom(DataManipulatorControl);

As I mentioned, when I create new instances of these prototypes, I’m finding that changing the rootID for one instance will change it for all. My first thought was that I forgot a “var” somewhere, and that my function was accessing the global context. That doesn’t seem to be the case though, so my next thought is that it’s using a variable local to the prototype. That doesn’t make much sense to me either though, because variables local to the prototype’s constructor call shouldn’t be accessible outside of it, unless accessed by a method that already has it in scope. Of course, the rootID() function does have it in scope, but I was under the impression that it would be run using the object context of the invoking object, not the prototype.

So, I’m very confused. Any light that can be shed on this issue would evoke much gratitude.

EDIT: The article provided by PRB describes a solution which cleanly solves this issue – mostly. The article notes that you need to also call the parent class’ constructor from within the child class constructor to initialize everything correctly. As a result, all of the methods are created fresh, with their own versions of the parent class local variables in closure.

There does seem to be one shortcoming with this approach (aside from efficiency concerns of duplicating functions in every instance). If one tries to call “overridden” functions from the prototype chain in an attempt at super functionality, this problem will resurface. The prototypes are, as before, instances of a single object, and trying to call their versions of a function will cause them to try to access their instance’s local variables.

Still the best solution I’ve seen though, aside from making all the data public :-).

Answer 1

Using this line is probably the issue:

this.prototype             = new parentClass();

This means that all instances of the function share the same memory blob defined by parentClass(). This is why when you change the value in one, it affects all of them.