摘要：如果只傳入了一個(gè)參數(shù)，則該方法會(huì)直接返回該參數(shù)。如果傳入的參數(shù)不是對(duì)象，原始類型會(huì)被包裝為對(duì)象。和無法被轉(zhuǎn)為對(duì)象，所以如果把它們兩個(gè)作為目標(biāo)對(duì)象則會(huì)報(bào)錯(cuò)。注意首先基本數(shù)據(jù)類型會(huì)被包裝成對(duì)象，和會(huì)被忽略。后續(xù)的內(nèi)容，敬請(qǐng)期待。

過去的一個(gè)多月新接手了一個(gè)公司的老項(xiàng)目，在實(shí)現(xiàn)新需求的同時(shí)還需要對(duì)有些地方進(jìn)行重構(gòu)，故而導(dǎo)致了沒時(shí)間更新文章。最近趁著周末更新一篇關(guān)于Object.assign使用的文章。

Object.assign()方法用于將所有可枚舉的屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象，它將返回目標(biāo)對(duì)象。這里有兩點(diǎn)需要注意：1、該方法復(fù)制的是可枚舉的屬性的值，不可枚舉的屬性不會(huì)處理。2、它返回的是一個(gè)對(duì)象。

Object.assign(target,...sources)

const target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2)
console.log(target)
// {a: 1, b: 2, c: 3}

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

const target = { a: 1, b: 1 }
const source1 = { b: 2, c: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2)
console.log(target)
// {a: 1, b: 2, c: 3}

如果只傳入了一個(gè)參數(shù)，則該方法會(huì)直接返回該參數(shù)。

const target = { a: 1 }
Object.assign(target)
console.log(target)
// {a: 1}
console.log(Object.assign(target) === target)
// true

如果傳入的參數(shù)不是對(duì)象，原始類型會(huì)被包裝為對(duì)象。

const target = Object.assign(1)
console.log(target)
// Number?{1}
typeof target
// "object"

null和undefined無法被轉(zhuǎn)為對(duì)象，所以如果把它們兩個(gè)作為目標(biāo)對(duì)象則會(huì)報(bào)錯(cuò)。

const target = Object.assign(null)
const tar = Object.assign(undefined)
// Cannot convert undefined or null to object

如果null和undefined作為源對(duì)象，則不會(huì)報(bào)錯(cuò)，因?yàn)榛緮?shù)據(jù)類型被包裝，null和undefined會(huì)被忽略。

const target = Object.assign({a:1}, null)
const tar = Object.assign({a:1}, undefined)
// {a:1}
const target1 = Object.assign(1, null)
// Number?{1}

如果null和undefined作為源對(duì)象中的屬性值，則它們不會(huì)被忽略

const target = Object.assign({ a: 1 }, { b: null }, { c: undefined })
console.log(target)
// {a: 1, b: null, c: undefined}

復(fù)制一個(gè)對(duì)象

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

拷貝symbol類型的屬性

const target = Object.assign({}, { a: 1 }, { [Symbol("foo")]: 2 })
console.log(target)
// {a: 1, Symbol(foo): 2}

拷貝的屬性是有限制的，繼承屬性和不可枚舉屬性無法被拷貝。

const obj = Object.defineProperty({}, "a", {
  enumerable: false,
  value: 1
})
console.log(obj)
// {a: 1}
const target = Object.assign({b: 2}, obj)
console.log(target)
// {b: 2}

現(xiàn)在把a(bǔ)屬性變成可枚舉的屬性。

const obj = Object.defineProperty({}, "a", {
  enumerable: true,
  value: 1
})
console.log(obj)
// {a: 1}
const target = Object.assign({b: 2}, obj)
console.log(target)
// {b: 2, a: 1}

接下來再看看基本數(shù)據(jù)類型的可枚舉性。

注意:首先基本數(shù)據(jù)類型會(huì)被包裝成對(duì)象，null和undefined會(huì)被忽略。其次只有字符串的包裝對(duì)象才可能有自身可枚舉屬性。

const v1 = "abc"
const v2 = true
const v3 = 10
const v4 = Symbol("foo")
const target = Object.assign({}, v1, null, v2, undefined, v3, v4)
console.log(target)
// {0: "a", 1: "b", 2: "c"}

拷貝一個(gè)數(shù)組。該方法會(huì)把數(shù)組視為對(duì)象，同時(shí)在拷貝的時(shí)候通過位置來進(jìn)行覆蓋。

const target = Object.assign([1,2,3],[4,5])
console.log(target)
// [4, 5, 3]

Object.assgin()實(shí)現(xiàn)的是淺拷貝。如果源對(duì)象中的某個(gè)屬性的值也是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用，一旦這個(gè)對(duì)象發(fā)生改變，那么拷貝后的目標(biāo)對(duì)象也做相應(yīng)的改變。

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}}
obj1.b.c = 3
console.log(JSON.stringify(obj1))
// {"a":1,"b":{"c":3}}
console.log(JSON.stringify(obj2))
// {"a":0,"b":{"c":3}}

至于深淺拷貝的區(qū)別以及如何實(shí)現(xiàn)的問題，會(huì)在之后的文章中詳細(xì)說明。

class Person {
  constructor(x, y) {
    Object.assign(this, {x, y})
  }
}

Object.assign(someClass.prototype, {
  foo(x, y){
    ....
  }
})

Object.assign(target, ...sources)

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

const DEFAULT_VALUE = {
  name: "Joe",
  age: "27"
}
function foo(options) {
  return Object.assign({}, DEFAULT_VALUE, options)
}

感謝各位能夠耐心的讀完，如有錯(cuò)誤歡迎指正，讓我們一起進(jìn)步。后續(xù)的內(nèi)容，敬請(qǐng)期待。