Why does this usage of Object.assign make my clone method work incorrectly?

Question

I'm trying to create an ES6 class that has its own clone method allowing itself to be cloned. This should create a new instance of the class, and copy over all of its public data to the new instance. I'm implementing the class like so:

class TestCloneable {
    constructor(someVal) {
        if (someVal) { this.someVal = someVal; }
    }

    clone = () => {
        const cloned = new TestCloneable(this.someVal);
        Object.assign(cloned, this); // same behaviour for Object.assign(cloned, {...this});
        return cloned;
    };
}

let test1 = new TestCloneable(1);
test1.anotherVal = 2;
let test2 = test1.clone();
test2.anotherVal = 3;
let test3 = test2.clone();

console.log(test1);
console.log(test2);
console.log(test3);

What I don't understand is why test3.anotherVal is 2. I set it to 3 on test2, then cloned test2. Somehow my usage of Object.assign seems to be causing this to refer back to test1 within the clone method of test2 instead of refering to test2 itself. How can I fix this?

Konrad · Accepted Answer · 2022-10-20 19:34:33Z

1

That's because this syntax clone = () => { } doesn't create a method, it creates a property

Use correct syntax and it will work

class TestCloneable {
    constructor(someVal) {
        if (someVal) { this.someVal = someVal; }
    }

    clone() {
        const cloned = new TestCloneable(this.someVal);
        Object.assign(cloned, this);
        return cloned;
    };
}

let test1 = new TestCloneable(1);
test1.anotherVal = 2;
let test2 = test1.clone();
test2.anotherVal = 3;
let test3 = test2.clone();

console.log(test1);
console.log(test2);
console.log(test3);

When you used Object.assign you also copied the clone method including the this context. So next time you run clone this is still pointing to the first object.

Cloning everything except the clone function results in the expected behaviour:

class TestCloneable {
    constructor(someVal) {
        if (someVal) { this.someVal = someVal; }
    }

    clone = () => {
        const cloned = new TestCloneable(this.someVal);
        cloned.anotherVal = this.anotherVal;
        cloned.someVal = this.someVal;
        return cloned;
    };
}

let test1 = new TestCloneable(1);
test1.anotherVal = 2;
let test2 = test1.clone();
test2.anotherVal = 3;
let test3 = test2.clone();

console.log(test1);
console.log(test2);
console.log(test3);

edited Oct 20, 2022 at 19:34

answered Oct 20, 2022 at 19:25

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jez Over a year ago

But shouldn't an arrow function's this resolve to the containing object instance? I thought that was how it worked.

Konrad Over a year ago

When you used Object.assign you also copied the clone method including the this context. So next time you run clone this is still pointing to the first object.

Jez Over a year ago

Right. Would an alternative be to filter out all functions from {...this} before passing it to Object.assign?

Konrad Over a year ago

You could do that but I would just stick to a method syntax.

Collectives™ on Stack Overflow

Why does this usage of Object.assign make my clone method work incorrectly?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related