JavaScript 系列 - Object.assign

138 阅读2分钟

Object.assign()  静态方法将一个或者多个源对象中所有可枚举自有属性复制到目标对象,并返回修改后的目标对象。

Object.assign(target, ...sources)
  • 相同的属性名后面的源对象的属性覆盖覆盖前面的源对象属性
  • Object.assign() 方法在使用 [[Get]] 和 [[Set]] 进行合并,如果需要拷贝属性描述符需要自行封装
  • 字符串和 Symbol 类型属性都会被复制
  • 如果赋值期间出错,抛出 TypeError,保留异常之前已经添加了一些属性
  • nullundefined 忽略
  • target 目标对象自身会改变
  • 原始类型会被包装为对象

合并对象

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

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

// 合并具有相同属性的对象
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 }

拷贝 symbol 类型的属性

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

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

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

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 }

原始类型会被包装为对象

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" }

异常会打断后续拷贝任务

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
// 异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的
console.log(target.foo3); // undefined
// 第三个源对象更是不会被拷贝到的
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 } }