JavaScript Object.assign 对象合并与拷贝详解

作用

用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

语法：Object.assign(target, ...sources)

target：目标对象。
sources：源对象。
返回值：目标对象。

Object.assign 方法只会拷贝源对象自身可枚举的属性到目标对象。

示例

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

如果只有一个参数，Object.assign 会直接返回该参数。

const obj = { a: 1 };
Object.assign(obj) === obj; // true

如果该参数不是对象，则会先转成对象，然后返回。

typeof Object.assign(2); // object
Number(2) == Object.assign(2); // true

由于 undefined 和 null 无法转成对象，所以如果它们作为参数，就会报错。

Object.assign(undefined); // 报错 Cannot convert undefined or null to object
Object.assign(null); // 报错 Cannot convert undefined or null to object

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果 undefined 和 null 不在首参数，就不会报错。

let obj = { a: 1 };
Object.assign(obj, undefined) === obj; // true
Object.assign(obj, null) === obj; // true

其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。 v1、v2、v3 分别是字符串、布尔值和数值，结果只有字符串合入目标对象（以字符数组的形式），数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性。

const v1 = 'abc';
const v2 = true;
const v3 = 10;

const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // {0: "a", 1: "b", 2: "c"}

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const v4 = Symbol('foo');

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// 原始类型会被包装，null 和 undefined 会被忽略。
// 注意，只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性 [[PrimitiveValue]]上面，这个属性是不会被 Object.assign 拷贝的。只有字符串的包装对象，会产生可枚举的实义属性，那些属性则会被拷贝

Object(true); // {[[PrimitiveValue]]: true}
Object(10); //  {[[PrimitiveValue]]: 10}
Object('abc'); // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

Object.assign 拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

如下：Object.assign 要拷贝的对象只有一个不可枚举属性 invisible，这个属性并没有被拷贝进去。

Object.assign(
  { b: 'c' },
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello',
  }),
);
// { b: 'c' }

继承属性和不可枚举属性是不能拷贝的

const obj = Object.create(
  { foo: 1 },
  {
    // foo 是个继承属性。
    bar: {
      value: 2, // bar 是个不可枚举属性。
    },
    baz: {
      value: 3,
      enumerable: true, // baz 是个自身可枚举属性。
    },
  },
);

const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

属性名为 Symbol 值的属性，也会被 Object.assign 拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' });
// { a: 'b', Symbol(c): 'd' }

const o1 = { a: 1 };
const o2 = { [Symbol('foo')]: 2 };

const obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 }
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

Object.assign 是浅拷贝

const obj1 = { a: { b: 1 } };
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b; // 2

同名属性的替换

对于嵌套的对象，一旦遇到同名属性，Object.assign 的处理方法是替换，而不是添加。如下：target 对象的 a 属性被 source 对象的 a 属性整个替换掉了。

const target = { a: { b: 'c', d: 'e' } };
const source = { a: { b: 'hello' } };
Object.assign(target, source);
// { a: { b: 'hello' } }

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

数组的处理

Object.assign 可以用来处理数组，但是会把数组视为对象。

如下:Object.assign 把数组视为属性名为 0、1、2 的对象，因此源数组的 0 号属性 4 覆盖了目标数组的 0 号属性 1。

Object.assign([1, 2, 3], [4, 5]); // [4, 5, 3]

取值函数的处理

Object.assign 只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。 source 对象的 foo 属性是一个取值函数，Object.assign 不会复制这个取值函数，只会拿到值以后，将这个值复制过去。

const source = {
  get foo() {
    return 1;
  },
};
const target = {};

Object.assign(target, source);
// { foo: 1 }

异常会打断后续拷贝任务

const target = Object.defineProperty({}, 'foo', {
  value: 1,
  writable: false,
}); // target 的 foo 属性是个只读属性。

Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
// TypeError: "foo" is read-only
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar); // 2，说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo); // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。
console.log(target.baz); // undefined，第三个源对象更是不会被拷贝到的。

拷贝访问器

const obj = {
  foo: 1,
  get bar() {
    return 2;
  },
};

let copy = Object.assign({}, obj);
console.log(copy); // { foo: 1, bar: 2 } copy.bar的值来自obj.bar的getter函数的返回值

// 下面这个函数会拷贝所有自有属性的属性描述符
function completeAssign(target, ...sources) {
  sources.forEach(source => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});

    // Object.assign 默认也会拷贝可枚举的Symbols
    Object.getOwnPropertySymbols(source).forEach(sym => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

copy = completeAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }

深拷贝问题

针对深拷贝，需要使用其他办法，因为 Object.assign() 拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

let obj1 = { a: 0, b: { c: 0 } };
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

// Deep Clone
obj1 = { a: 0, b: { c: 0 } };
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

// Deep Clone
obj1 = { a: 0, b: { c: 0 } };
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

常见用途

为对象添加属性：通过 Object.assign 方法，将 x 属性和 y 属性添加到 FxFn 类的对象实例

class FxFn {
  // 类的构造方法
  constructor(name, age) {
    Object.assign(this, { name, age });
    // 相当于
    // this.name = name
    // this.age = age
  }

  showName() {
    console.log('调用父类的构造方法');
    console.log(this.name);
  }
}

let fx = new FxFn('fx', 18);
console.log(fx); // FxFn {name: "fx", age: 18}
console.log(fx.showName()); // fx

为对象添加方法，使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用 assign 方法添加到 SomeClass.prototype 之中。

Object.assign(SomeClass.prototype, {
  someMethod (arg1, arg2) {
  ···
  },
  anotherMethod () {
  ···
  }
});

// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};

克隆对象，将原始对象拷贝到一个空对象，就得到了原始对象的克隆。

let fx = {
  name: 'fx',
  age: 18,
};

function clone(origin) {
  return Object.assign({}, origin);
}

let fx1 = clone(fx);
console.log(fx1); // Object {name: "fx", age: 18}

不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

合并多个对象，将多个对象合并到某个对象。Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。

const merge = (target, ...sources) => Object.assign(target, ...sources);

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const obj = Object.assign(target, source1, source2);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

如果希望合并后返回一个新对象，可以改写上面函数，对一个空对象合并。

const merge = (...sources) => Object.assign({}, ...sources);

为属性指定默认值，DEFAULTS 对象是默认值，options 对象是用户提供的参数。 Object.assign 方法将 DEFAULTS 和 options 合并成一个新对象，如果两者有同名属性，则 option 的属性值会覆盖 DEFAULTS 的属性值。

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html',
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

注意，由于存在浅拷贝的问题，DEFAULTS 对象和 options 对象的所有属性的值，最好都是简单类型，不要指向另一个对象。否则，DEFAULTS 对象的该属性很可能不起作用。原意是将 url.port 改成 8000，url.host 不变。实际结果却是 options.url 覆盖掉 DEFAULTS.url，所以 url.host 就不存在了。

const DEFAULTS = {
  url: {
    host: 'example.com',
    port: 7070,
  },
};

processContent({ url: { port: 8000 } });
// {
//   url: {port: 8000}
// }