1 ?基本用法

Object.assign方法用于對(duì)象的合并，將源對(duì)象（ source ）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（ target ）。

var?target?=?{?a:?1?};??

var?source1?=?{?b:?2?};??

var?source2?=?{?c:?3?};??

Object.assign(target,?source1,?source2);??

//target//?{a:1,?b:2,?c:3}??

Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。

注意，如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

var?target?=?{?a:?1,?b:?1?};??

var?source1?=?{?b:?2,?c:?2?};??

var?source2?=?{?c:?3?};??

Object.assign(target,?source1,?source2);??

//target//?{a:1,?b:2,?c:3}?

如果只有一個(gè)參數(shù)，Object.assign會(huì)直接返回該參數(shù)。

var?obj?=?{a:?1};??

Object.assign(obj)?===?obj//?true??

如果該參數(shù)不是對(duì)象，則會(huì)先轉(zhuǎn)成對(duì)象，然后返回。

typeof?Object.assign(2)?//?"object"??

由于undefined和null無(wú)法轉(zhuǎn)成對(duì)象，所以如果它們作為參數(shù)，就會(huì)報(bào)錯(cuò)。

Object.assign(undefined)?//??報(bào)錯(cuò)??

Object.assign(null)?//??報(bào)錯(cuò)?

如果非對(duì)象參數(shù)出現(xiàn)在源對(duì)象的位置（即非首參數(shù)），那么處理規(guī)則有所不同。首先，這些參數(shù)都會(huì)轉(zhuǎn)成對(duì)象，如果無(wú)法轉(zhuǎn)成對(duì)象，就會(huì)跳過(guò)。這意味著，如果undefined和null不在首參數(shù)，就不會(huì)報(bào)錯(cuò)。

let?obj?=?{a:?1};??

Object.assign(obj,?undefined)?===?obj//?true??

Object.assign(obj,null)?===?obj?//?true??

其他類型的值（即數(shù)值、字符串和布爾值）不在首參數(shù)，也不會(huì)報(bào)錯(cuò)。但是，除了字符串會(huì)以數(shù)組形式，拷貝入目標(biāo)對(duì)象，其他值都不會(huì)產(chǎn)生效果。

var?v1?=?'abc';??

var?v2?=?true;??

var?v3?=?10;??

var?obj?=?Object.assign({},?v1,?v2,?v3);??

console.log(obj);//?{?"0":?"a",?"1":?"b",?"2":?"c"?}??

上面代碼中，v1、v2、v3分別是字符串、布爾值和數(shù)值，結(jié)果只有字符串合入目標(biāo)對(duì)象（以字符數(shù)組的形式），數(shù)值和布爾值都會(huì)被忽略。這是因?yàn)橹挥凶址陌b對(duì)象，會(huì)產(chǎn)生可枚舉屬性。

Object(true)?//?{[[PrimitiveValue]]:?true}??

Object(10)//?{[[PrimitiveValue]]:?10}??

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

上面代碼中，布爾值、數(shù)值、字符串分別轉(zhuǎn)成對(duì)應(yīng)的包裝對(duì)象，可以看到它們的原始值都在包裝對(duì)象的內(nèi)部屬性[[PrimitiveValue]]上面，這個(gè)屬性是不會(huì)被Object.assign拷貝的。只有字符串的包裝對(duì)象，會(huì)產(chǎn)生可枚舉的實(shí)義屬性，那些屬性則會(huì)被拷貝。

Object.assign拷貝的屬性是有限制的，只拷貝源對(duì)象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性（enumerable: false）。

Object.assign({b:?'c'},??

Object.defineProperty({},'invisible',?{??

enumerable:false,??

value:'hello'??

????})??

)??

//?{?b:?'c'?}??

上面代碼中，Object.assign要拷貝的對(duì)象只有一個(gè)不可枚舉屬性invisible，這個(gè)屬性并沒(méi)有被拷貝進(jìn)去。

屬性名為 Symbol 值的屬性，也會(huì)被Object.assign拷貝。

2 ?注意點(diǎn)

Object.assign方法實(shí)行的是淺拷貝，而不是深拷貝。也就是說(shuō)，如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用。

var?obj1?=?{a:?{b:?1}};??

var?obj2?=?Object.assign({},?obj1);??

obj1.a.b?=?2;??

obj2.a.b//?2

上面代碼中，源對(duì)象obj1的a屬性的值是一個(gè)對(duì)象，Object.assign拷貝得到的是這個(gè)對(duì)象的引用。這個(gè)對(duì)象的任何變化，都會(huì)反映到目標(biāo)對(duì)象上面。

對(duì)于這種嵌套的對(duì)象，一旦遇到同名屬性，Object.assign的處理方法是替換，而不是添加。

var?target?=?{?a:?{?b:?'c',?d:?'e'?}?}??

var?source?=?{?a:?{?b:?'hello'?}?}??

Object.assign(target,?source)??

//?{?a:?{?b:?'hello'?}?}??

上面代碼中，target對(duì)象的a屬性被source對(duì)象的a屬性整個(gè)替換掉了，而不會(huì)得到{ a: { b: 'hello', d: 'e' } }的結(jié)果。這通常不是開發(fā)者想要的，需要特別小心。

有一些函數(shù)庫(kù)提供Object.assign的定制版本（比如 Lodash 的_.defaultsDeep方法），可以解決淺拷貝的問(wèn)題，得到深拷貝的合并。

注意，Object.assign可以用來(lái)處理數(shù)組，但是會(huì)把數(shù)組視為對(duì)象。

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

//?[4,?5,?3]??

上面代碼中，Object.assign把數(shù)組視為屬性名為 0 、 1 、 2 的對(duì)象，因此目標(biāo)數(shù)組的 0 號(hào)屬性4覆蓋了原數(shù)組的 0 號(hào)屬性1。

3 ?常見(jiàn)用途

（ 1 ）為對(duì)象添加屬性

class?Point?{??

????constructor(x,?y)?{??

Object.assign(this,?{x,?y});??

????}??

}??

上面方法通過(guò)Object.assign方法，將x屬性和y屬性添加到Point類的對(duì)象實(shí)例。

（ 2 ）為對(duì)象添加方法

Object.assign(SomeClass.prototype,?{??

????someMethod(arg1,?arg2)?{??

????···??

????},??

????anotherMethod()?{??

????···??

????}??

});??

//??等同于下面的寫法??

SomeClass.prototype.someMethod?=function?(arg1,?arg2)?{??

···??

};??

SomeClass.prototype.anotherMethod?=function?()?{??

···??

};??

上面代碼使用了對(duì)象屬性的簡(jiǎn)潔表示法，直接將兩個(gè)函數(shù)放在大括號(hào)中，再使用 assign 方法添加到 SomeClass.prototype 之中。

（ 3 ）克隆對(duì)象

function?clone(origin)?{??

return?Object.assign({},?origin);??

}??

上面代碼將原始對(duì)象拷貝到一個(gè)空對(duì)象，就得到了原始對(duì)象的克隆。

不過(guò)，采用這種方法克隆，只能克隆原始對(duì)象自身的值，不能克隆它繼承的值。如果想要保持繼承鏈，可以采用下面的代碼。

function?clone(origin)?{??

????let?originProto?=?Object.getPrototypeOf(origin);??

return?Object.assign(Object.create(originProto),?origin);??

}??

（ 4 ）合并多個(gè)對(duì)象

將多個(gè)對(duì)象合并到某個(gè)對(duì)象。

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

如果希望合并后返回一個(gè)新對(duì)象，可以改寫上面函數(shù)，對(duì)一個(gè)空對(duì)象合并。

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

（ 5 ）為屬性指定默認(rèn)值

const?DEFAULTS?=?{??

????logLevel:?0,??

outputFormat:'html'??

};??

function?processContent(options)?{??

????let?options?=?Object.assign({},?DEFAULTS,?options);??

}??

上面代碼中，DEFAULTS對(duì)象是默認(rèn)值，options對(duì)象是用戶提供的參數(shù)。Object.assign方法將DEFAULTS和options合并成一個(gè)新對(duì)象，如果兩者有同名屬性，則option的屬性值會(huì)覆蓋DEFAULTS的屬性值。

注意，由于存在深拷貝的問(wèn)題，DEFAULTS對(duì)象和options對(duì)象的所有屬性的值，都只能是簡(jiǎn)單類型，而不能指向另一個(gè)對(duì)象。否則，將導(dǎo)致DEFAULTS對(duì)象的該屬性不起作用。