JS函数将一个对象作为输入并返回一个对象，该对象对作为参数传递的对象执行操作

Question

I wrote a function that inputs an object that can set the value to the key or assign an object directly. The setter and getter work fine, but when the object was assigned to another object, it doesn't work well (the object does not change at all).

The weird thing is when the object was output "inside" the functions the result is correct. But the result is not what I expected "outside" the functions. Could anyone explain this?

function foo(input) {
    return {
        set: function(key, value) {
            input[key] = value;
            console.log(input);
        },
        get: function(key) {
            return input[key];
        },
        assign: function(object) {
            input = Object.assign({}, object);
            console.log(input);
        }
    };
};

var obj = {},
    bar = foo(obj);

bar.set('x', 1);    // {x: 1}
console.log(obj);   // {x: 1}
bar.set('y', 2);    // {x: 1, y: 2}
console.log(obj);   // {x: 1, y: 2}   so far so good
bar.assign({        // {a: 5, b: 10}
    a: 5,
    b: 10
});
console.log(obj);   // {x: 1, y: 2}   supposed to be {a: 5, b: 10} but it was not
bar.assign({        // {a: 15}
    a: 15
});
console.log(obj);   // {x: 1, y: 2}   didn't change at all
bar.set('b', 20);   // {a: 15, b: 20}
console.log(obj);   // {x: 1, y: 2}
console.log(bar.get('a'));  // 15

Answer 1

Here: input = Object.assign({}, object) , you are assigning to new object ( {} ), so you aren't editing originally passed object. Changing this line just to Object.assign(input, object) should do what you want.

Answer 2

The issue is that it is creating new object each time you call assign function. To extend the input object use Object.assign(input, object) instead of input = Object.assign({}, object);

function foo(input) {
    return {
        set: function(key, value) {
            input[key] = value;
            console.log(input);
        },
        get: function(key) {
            return input[key];
        },
        assign: function(object) {
            Object.assign(input, object);
            console.log(input);
        }
    };
};

Answer 3

 var obj = {} 

The above creates an object (which we will call A) and assigns a reference to it to obj .

 bar = foo(obj); 

Now you pass the value of obj , which is the reference to A, to foo .

 function foo(input) 

… and then you assign it to input .

So now you have two variables ( input and obj ) which both have values which are a reference to A.

 input = Object.assign({}, object); 

Now you create a new object (B), copy everything from object on to it, and then assign that to input .

So now you have the two variables, input pointing to B and obj pointing to A .

 console.log(obj); // {x: 1, y: 2} supposed to be {a: 5, b: 10} but it was not 

That's because you are looking at obj but the values you expect are on input (which you can't access because it isn't in scope).

---

You can modify the existing object instead of creating a new one:

    assign: function(object) {
        Object.assign(input, object);
        console.log(input);
    }

… but that won't delete the existing values.

If you want to do that, then you have to do so explicitly:

    assign: function(object) {
        for (var prop in object) {
          delete object[prop];
        }
        Object.assign(input, object);
        console.log(input);
    }