Why are my JavaScript object properties being overwritten by other instances?

Question

I created an object like the following.

var BaseObject = function(){

var base = this;
base.prop;

base.setProp = function(val){
    base.prop = val;
}
}


        

Answer 1

There is only one BaseObject instance from which all TestObjects inherit. Don't use instances for creating prototype chains!

What you want is:

var TestObject = function(){
    BaseObject.call(this); // give this instance own properties from BaseObject
    // do something
}
TestObject.prototype = Object.create(BaseObject.prototype);

See JavaScript inheritance: Object.create vs new, Correct javascript inheritance and What is the reason to use the 'new' keyword at Derived.prototype = new Base for a detailed explanation of the problems with new. Also have a look at Crockford's Prototypal inheritance - Issues with nested objects

Answer 2

Think of protoypal inheritance as dealing solely with objects and without the concept of classes. In your code you have a BaseObject object which has a prop attribute. You have 2 other objects that extend from 1 instance of that object, but the property belongs to the original object. If you need each object to have their own copy, then they need to be given a distinct variable that is intialized for that object (such as in their constructor).

As an aside the Java style accessors are overkill in JavaScript (you can intercept access natively if needed) and can further muddy these questions since they will behave differently.