How to clone an object with an arrow function in JavaScript?

Question

I have this snippet of JavaScript code:

class Foo {
    constructor() {
        this.b = 1;
        this.getB = () => { return this.b; };
    }
}

const normalFoo = new Foo();
const clonedFoo = magicClone(normalFoo);

clonedFoo.b = 5;

console.log(clonedFoo instanceof Foo); // should be true
console.log(clonedFoo.getB()); // should be 5

I'd like to know what I can replace magicClone with in order to get the desired result (e.g. a clone that respects arrow function binding).

I'm fine with any sorts of terrible hacks and I'm also fine with solutions that work most of the time, as long as they work in this case. This is mostly for my edification :)

Please don't close this question as a duplicate - cloning an object has been asked many times, but I couldn't find a single answer that does this. Object.assign, lodash's cloneDeep, jQuery's clone, etc all do not handle this case.

I can think of a solution that would involve creating a custom string format similar to JSON but incompatible. Obviously that would take a while to implement but does that even seem like something you'd consider using or would it be easier to just figure out how to work around this issue? — Patrick Roberts, Aug 21 '18 at 00:37
@PatrickRoberts I'd be interested in any idea that could work, even if it's not fully fleshed out. The problem I've been running into with that sort of string serialization is that there's no way to re-bind the arrow function to the appropriate context, but I'd love to be proven wrong! — thedayturns, Aug 21 '18 at 00:50
Yeah now that you say that, I'm not sure my solution would work. I'm with charlietfl in that this is a Bad Practice™ — Patrick Roberts, Aug 21 '18 at 00:52
@PatrickRoberts Yeah, I know it's technically a bad practice... the idea is that I want to build a cloning function resilient to bad practices that other people do. In any case, it's mostly for my own use, so I don't really mind hacky solutions. — thedayturns, Aug 21 '18 at 00:54

score 1 · Answer 1 · answered Aug 21 '18 at 01:01

So the main challenge here is that you have an arrow function that is assigned as a property on your Foo instances. Since arrow functions inherit their this from their enclosing context, and they can't be rebound once created, the only way to have getB reference the clone's b field is to recreate that arrow function. That means you have to somehow invoke Foo's constructor so that the arrow function will be recreated with the right context.

That said, this magicClone implementation will do the trick for this example:

function magicClone(obj) {
    // Manually create new instance of whatever `obj` is by invoking its constructor:
    const newInstance = new obj.__proto__.constructor()

    // Assign to the new instance all the non-function properties of `obj`.
    Object.assign(newInstance, JSON.parse(JSON.stringify(obj)));

    return newInstance;
}

However, the main drawback of this approach is that if obj's constructor requires any arguments, there is no way you can know what they should be. So this approach relies on the fact that your example Foo class has an argumentless constructor. But if you can stay within that limititation, it does get you the right output:

class Foo {
    constructor() {
        this.b = 1;
        this.getB = () => { return this.b; };
    }
}

function magicClone(obj) {
    const newInstance = new obj.__proto__.constructor()
    Object.assign(newInstance, JSON.parse(JSON.stringify(obj)));
    return newInstance;
}

const normalFoo = new Foo();
normalFoo.otherProp = "must stay the same";

const clonedFoo = magicClone(normalFoo);
clonedFoo.b = 5;

console.log(clonedFoo instanceof Foo); // should be true
console.log(clonedFoo.getB()); // should be 5
console.log(clonedFoo.otherProp)

Avoid `__proto__`, it's deprecated. Use `Object.getPrototypeOf` (or just directly refer to `obj.constructor`, that's what inheritance is good for) — Bergi, Aug 21 '18 at 08:16

score 1 · Answer 2 · answered Aug 21 '18 at 08:15

It's fundamentally impossible to clone a function. It might be a closure, and we can neither know nor clone what it closes over. (Arrow functions closing over their this value is just a special case of this).

Your best bet will be having a cloning protocol implemented by your instances:

class Foo {
    constructor() {
        this.b = 1;
        this.getB = () => { return this.b; };
    }
    clone() {
        return new Foo // usually passing the current instance's state as arguments
    }
}
function magicClone(o) {
    if (Object(o) !== o) return o; // primitive value
    if (typeof o.clone == "function") return o.clone(); // if available use it
    return Object.assign(Object.create(Object.getPrototypeOf(o)), o); // shallow copy
}

const normalFoo = new Foo();
const clonedFoo = magicClone(normalFoo);

score 0 · Answer 3 · answered Aug 21 '18 at 05:52

0

You cannot "rebind" an arrow function. It will always be called with the context in which it was defined. Just use a normal function.

From the ECMAScript 2015 Spec:

Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function.

answered Aug 21 '18 at 05:52

Adrian Brand

20,384
4
39
60

Yeah, but that isn't sufficient to prove that my question is impossible. For instance, you could imagine a solution that takes the shape of creating a new arrow function that has the same context. – thedayturns Aug 21 '18 at 19:01

How to clone an object with an arrow function in JavaScript?

3 Answers3