Javascript - Pack properties of parent and child in the same JSON string

Question

I have a javascript scenario where I have created a base class and a derived class and wish to pack the total set of properties into a JSON-string with JSON.stringify().

When I use the equivalent to the code below I only get the child-object's properties when I run "toString()" on one of the DerivedClass instances:

function BaseClass() {
    this.version = "0.0.0";
    this.time = Date.now();
    this.type = this.constructor.name;
}

BaseClass.prototype.BaseClassException = function(message) {
    this.message = message;
}

BaseClass.prototype.toString = function() {
    return JSON.stringify(this);
}

BaseClass.parse = function(jsonString) {
    var json = JSON.parse(jsonString);

    switch(json.type) {
    case "DerivedClass1":
        return new DerivedClass1();
    case "DerivedClass2":
        return new DerivedClass2();
    default:
        throw new BaseClassException("No compatible type found when parsing: " + jsonString);
}

function DerivedClass1(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
    this.type = this.constructor.name;
}
DerivedClass1.prototype = new BaseClass();
DerivedClass1.prototype.constructor = DerivedClass1;

function DerivedClass2(prop3) {
    this.prop3 = prop3;
}
DerivedClass2.prototype = new BaseClass();
DerivedClass2.prototype.constructor = DerivedClass2;


// Test
var dc1 = new DerivedClass1("A", "B");
console.log(dc1.toString());  // Returns JSON-string with properties of DerivedClass1, but not BaseClass

There will be several different derived classes. While I do know that js doesn't really support classes I would still like to pack all the properties from the base and child objects in the same JSON-string. The structure is necessary to correlate to the other nodes of the total system, ie all properties need to be present.

If anyone at the same time has the knowledge of nudging me in the correct direction to understand the link between the child object and parent object in order for me to better understand the "inheritance" part of js I'd be really thankful as well. I more used to strict oo-languages so I'd be happy to learn.

Answer 1

There are two things which I can readily suggest.

1. To invoke the base class constructor, you have to invoke it manually like this

   function DerivedClass1(prop1, prop2) {
       BaseClass.call(this);
       this.prop1 = prop1;
       this.prop2 = prop2;
       this.type = this.constructor.name;
   }
   

   We invoke the parent constructor function, with the current object. The important thing to note here is that, we are setting the current context to the object of type DerivedClass1.

2. To actually do prototypal inheritance, you need to use the base class's prototype, not the object.

   DerivedClass1.prototype = Object.create(BaseClass.prototype);
   

   In your case, BaseClass's constructor doesn't depend on any arguments. So, doing DerivedClass1.prototype = new BaseClass(); will not make a big difference. But it is always better to depend only on the Parent constructor's prototype. Read more about using Object.create for inheritance, in this wonderful answer.