摘要：將對象的屬性拷貝到了對象，合并成一個新的對象。而這種行為也是新增的標準。總結本章講解了對象字面量語法拓展，新增方法，允許重復的對象字面量屬性，自有枚舉屬性排序，增強對象原型，明確了方法的定義。但是，就算把全部新增的功能記住也不是難事。

變量功能被加強了、函數功能被加強了，那么作為JavaScript中最普遍的對象，不加強對得起觀眾嗎？

在ES6中，對象分為下面幾種叫法。（不需要知道概念）

1、普通對象

2、特異對象

3、標準對象

4、內建對象

隨便打開一個js文件，對象都無處不在，看一個簡單的對象。

{
  a: 2
}

ES6針對對象的語法擴展了一下功能

1、屬性初始值簡寫

//ES5
function a(id) {
  return {
    id: id
  };
};

//ES6
const a = (id) => ({
  id
})

2、對象方法簡寫

// ES5
const obj = {
  id: 1,
  printId: function() {
    console.log(this.id)
  }
}

// ES6
const obj = {
  id: 1,
  printId() {
    console.log(this.id)
  }
}

3、屬性名可計算

屬性名可以傳入變量或者常量，而不只是一個固定的字符串。

const id = 5
const obj = {
  [`my-${id}`]: id
}
console.log(obj["my-5"]) // 5

在Object原始對象上新增方法，原則上來說不可取，但是為了解決全世界各地提交的issue，在ES6中的全局Object對象上新增了一些方法。

1、Object.is()

用來解決JavaScript中特殊類型 == 或者 === 異常的情況。

下面是一些異常情況

//實際出現了異常(錯誤輸出)
console.log(NaN === NaN) // false
console.log(+0 === -0) // true
console.log(5 == "5") //true

//我們期望的目標輸出(正確輸出)
console.log(NaN === NaN) // true
console.log(+0 === -0) // false
console.log(5 == "5") //false

為了解決歷遺留問題，新增了Object.is()來處理2個值的比較。

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false
console.log(Object.is(5, "5")) //false

2、Object.assign()

也許你已經見過或者使用過這個方法了，那這個新增的方法解決了什么問題呢？

答：混合（Mixin）。

mixin是一個方法，實現了拷貝一個對象給另外一個對象，返回一個新的對象。

下面是一個mixin方法的實現，這個方法實現的是淺拷貝。將b對象的屬性拷貝到了a對象，合并成一個新的對象。

//mixin不只有這一種實現方法。
function mixin(receiver, supplier) {
  Object.keys(supplier).forEach((key) => {
    receiver[key] = supplier[key]
  })
  return receiver
}

let a = {name: "sb"};
let b = {
  c: {
    d: 5
    }
  }
console.log(mixin(a, b)) // {"name":"sb","c":{"d":5}}

寫這樣一個mixin方法是不是很煩，而且每個項目都得引入這個方法，現在，ES6給我們提供了一個現成的方法Object.assign()來做mixin的事情。

假設要實現上面的mixin方法，你只需要給Object.assign()傳入參數即可。

console.log(Object.assign(a, b))// {"name":"sb","c":{"d":5}}

使用Object.assign()，你就可以不是有繼承就能獲得另一個對象的所有屬性，快捷好用。

看一個實現Component的例子。

//聲明一個構造函數Component
class Component {}
//給構造函數設置原型方法
Component.prototype = {
  componentWillMount() {},
  componentDidMount() {},
  render() {console.log("render")}
}
//定義一個新的對象
let MyComponent = {}
//新對象繼承了Component的所有方法和屬性。
Object.assign(MyComponent, Component.prototype)

console.log(MyComponent.render()) // render

在react的reducer中，每次傳入新的參數返回新的state，你都可能用到Object.assign()方法。

ES5的嚴格模式下，如果你的對象中出現了key相同的情況，那么就會拋出錯誤。而在ES6的嚴格模式下，不會報錯，后面的key會覆蓋掉前面相同的key。

const state = {
  id: 1,
  id: 2
}
console.log(state.id) // 2

這個概念看起來比較模糊，如果你看了下面的例子，你可能就會明白在說什么了。

const state = {
  id: 1,
  5: 5,
  name: "eryue",
  3: 3
}

Object.getOwnPropertyNames(state) 
//["3","5","id","name"] 枚舉key

Object.assign(state, null)
//{"3":3,"5":5,"id":1,"name":"eryue"} 

上面的例子的輸出結果都有個規律，就是數字提前，按順序排序，接著是字母排序。而這種行為也是ES6新增的標準。你還可以自己測試一下其他方法是不是也支持枚舉自動排序。比如Object.keys(), for in 等。

如果你想定義一個對象，你會想到很多方法。

let a = {}

let b = Object.create(a)

function C() {}

class D {}

那么，ES6是如何在這么強大的對象上面繼續增強功能呢？

1、允許改變對象原型

改變對象原型，是指在對象實例化之后，可以改變對象原型。我們使用 Object.setPrototypeOf() 來改變實例化后的對象原型。

let a = {
  name() {
    return "eryue"
  }
}
let b = Object.create(a)
console.log(b.name()) // eryue
  
//使用setPrototypeOf改變b的原型
let c = {
  name() {
    return "sb"
  }
}    
Object.setPrototypeOf(b, c)    
console.log(b.name()) //sb

2、簡化原型訪問的super引用

這一個知識你可以看書籍原文，我目前想不到實際業務代碼來分析。

ES6明確了方法的定義。

let a = {
  //方法
  name() {
    return "eryue"
  }
}
//函數
function name() {}

估計習慣了函數和方法切換的我們，還是不用太在意這些具體的叫法。

本章講解了對象字面量語法拓展，ES6新增方法，允許重復的對象字面量屬性，自有枚舉屬性排序，增強對象原型，明確了方法的定義。

我們平時開發中比較常用的是前面4種新增的功能，尤其是Object.assign()的使用。但是，就算把全部新增的功能記住也不是難事。所以，全都記住吧！

=> 返回文章目錄