Cloning extended objects in Javascript, keeping all father's methods

Question

I cannot achieve a complete and satisfactory cloning method in JS. I have this father class, with properties and methods, of course each derived class must access to such father's methods

class Father {
    constructor() {
        this.fatherProp = 1;
    }

    fatherMethod() {
        console.log('father method');
    }
}

and this child class, that extends the previous one

class Child extends Father {
    constructor() {
        super();
        this.childProp = 2;
    }
}

The client code works fine

let child1 = new Child();
console.log(child1); // CONSOLE: Child {fatherProp: 1, childProp: 2}
child1.fatherMethod(); // CONSOLE: father method

Then, I need to clone the child object, of course keeping all the same father/child classes structure, properties and method. So I added a clone method in Father class

class Father {
    constructor() {
        this.fatherProp = 1;
    }

    fatherMethod() {
        console.log('father method');
    }

    clone() {
        let newObject = {};
        Object.assign(newObject, this);
        return newObject;
    }
}

Client code works so-and-so.

let child2 = child1.clone();
console.log(child2); // CONSOLE: {fatherProp: 1, childProp: 2} *** "Child" type missing
child2.fatherMethod(); // CONSOLE: Uncaught TypeError: child2.fatherMethod is not a function

Deeply logging the two objects I can see that first child (blue in the picture) has "father" as "__proto". While second object (red) has empty __proto

What's going on? How should I clone an object in this case? Thank you

That's what `newObject = {}` creates. You will need to create an instance of your class. — Bergi, Apr 22 '20 at 07:24

score 2 · Accepted Answer · answered Apr 22 '20 at 07:13

Your clone method return an object instead of a Class, one way:

class Father {
    constructor() {
        this.fatherProp = 1;
    }

    fatherMethod() {
        console.log('father method');
    }

    clone() {
        let clone = Object.assign( Object.create( Object.getPrototypeOf(this)), this);
        return clone;
    }
}

class Child extends Father {
    constructor() {
        super();
        this.childProp = 2;
    }
}


let child1 = new Child();
console.log(child1); // CONSOLE: Child {fatherProp: 1, childProp: 2}
child1.fatherMethod(); // CONSOLE: father method

let child2 = child1.clone();
console.log(child2); // CONSOLE: {fatherProp: 1, childProp: 2} *** "Child" type missing
child2.fatherMethod(); // CONSOLE: Uncaught TypeError: child2.fatherMethod is not a function

It works, thanks to everyone. (It was actually a duplicated question.) — Marco, Apr 22 '20 at 15:23

Cloning extended objects in Javascript, keeping all father's methods

1 Answers1