如果 function 作为“目标”参数传递，Object.assign output 是否不同

Question

I have the following code, that executes successfully, but I am not quite sure how can this happen.

 var obj = Object.assign( (...args) => ({ a: 1 }), { toString: () => 'type' } ); console.log(obj); // f type

Why is the output of the above not

{ 
  f: () => {
    return {a: 1}
  }, 
  toString: () => 'type'
}

Could someone give a detailed explanation of the above?

Answer 1

Object.assign copies the values of all the enumerable own properties of several source objects to a target object:

Object.assign({ a: 'foo' }, { b: 'bar' });
// => { a: 'foo', b: 'bar' }

In your given example the target object is the arrow function. In Javascript, functions are just objects (with their own enumerable properties) and you can add additional properties without worry.

The source object in your example is an object containing a property toString with a function value. You're essentially copying this property onto the destination function.

When you console.log the resulting object, toString is automatically called and its result is logged to the console. Since the object is actually a function you will see the weird output of f type . How this is shown is browser dependent though.

To answer your question as to why the returned object doesn't look like what you wrote: You extended the function itself. If you instead created a new object with property f to the given function you would get the desired result:

 const obj = Object.assign({ f: (...args) => ({ a: 1 })}, { toString: () => 'type' }); console.log(obj);