JavaScript之Object.assign()方法详解

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法：Object.assign(target, …sources) target：目标对象。sources：源对象。返回值：目标对象。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。
在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。
复制一个对象

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”
由于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.defineProperty()详解

Object.assign({b: ‘c’},
Object.defineProperty({}, ‘invisible’, {
enumerable: false,
value: ‘hello’
})
)
// { b: ‘c’ }
继承属性和不可枚举属性是不能拷贝的，Object.create()方法详解

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方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。源对象obj1的a属性的值是一个对象，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属性整个替换掉了，而不会得到{ a: { b: ‘hello’, d: ‘e’ } }的结果。这通常不是开发者想要的，需要特别小心。

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

————————————————

原文链接：https://blog.csdn.net/weixin_40013817/article/details/101424487