Search code examples
javascriptoopfunction-prototypes

Problem extending class with javascript object prototype


I have got this problem... B is a base class, and A is a derived class... Event though A is derived from B, various objects of A points to the same object of B.

I know i have assigned an object of B to the prototype of A to make A child of B.

But different objects of A, they should have different address space to hold the variables, right? Can you anyone correct this?

    function B(){

        this.obj = {};
    }

    function A(){

    }

    A.prototype = new B();

    var a = new A();
    var b = new A();
    var c = new A();

    console.log(a.obj == b.obj); //prints true
    console.log(a.obj === b.obj); //prints true

    a.obj.name = "stackoverflow";
    console.log(b.obj.name); //prints stackoverflow

What change should I make in this code so that gives me following result.

a.obj === b.obj  //must be false

a instanceof A;  //must be true
a instanceof B;  //must be true

Solution

  • That's why you shouldn't have mutable values (particularly objects or arrays) on a prototype - the same value will be shared across all object instances and can be changed in any of them. Here you can avoid the problem by using Object.create that won't call the constructor of B when creating the prototype:

    A.prototype = Object.create(B.prototype);
    

    Constructor of A should then call the constructor of B for each new object:

    function A() {
      B.call(this);
    }
    

    For browsers that don't support Object.create() you can emulate it as mentioned on http://javascript.crockford.com/prototypal.html.