Well, both objects b1 and b2 have a prototype of the same , namely an instance of ObjA :
ObjB.prototype = new ObjA();
therefore, they inherit and have access to their properties. b1.objLiteral and b2.objLiteral refer to the same object:
and
> b1.objLiteral === b2.objLiteral true
To fix this, you need to create a new object for each instance. This is usually done by calling the constructor "parent" inside the constructor "child":
function ObjB() { ObjA.call(this); this.propB = 2; }
ObjA.call(this) will call ObjA and inside this function this will refer to the argument passed to call [MDN] , in this case a new instance of ObjB :
As you can see, objLiteral now a property of each instance:
> b1.objLiteral === b2.objLiteral false
To avoid this confusion in the first place, you should avoid installing an instance of the parent constructor as a prototype of the child constructor. What if the parent constructor expects specific instance arguments? What would you switch to ObjA in this case?
Better install prototype child constructor prototype parent constructor (with one level of indirection) and call the parent constructor as above:
function inherit(Child, Parent) { var Tmp = function() {}; Tmp.prototype = Parent.prototype; Child.prototype = new Tmp(); Child.prototype.constructor = Child; } inherit(ObjB, ObjA);
Tmp to prevent the Parent.prototype extension if you continue Child.prototype .
Regarding propA :
It "works" because you assign it a new meaning.
Here again the objects, after assigning the properties x.objLiteral and x.propA . You can see that the objects do not have their own objLiteral property, but their own propA :
If instead you assign a new value to objLiteral , for example. through
b1.objLiteral = {hello: 42};
b1 will now have its own objLiteral property, which is the shadow of the inherited: