《深刻理解ES6》筆記——擴展對象的功能性（4）

變量功能被增強了、函數功能被增強了，那麼做爲JavaScript中最廣泛的對象，不增強對得起觀衆嗎？

對象類別

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

一、普通對象

二、特異對象

三、標準對象

四、內建對象

對象字面量語法拓展

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

{
  a: 2
}

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

一、屬性初始值簡寫

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

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

二、對象方法簡寫

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

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

三、屬性名可計算

屬性名能夠傳入變量或者常量，而不僅是一個固定的字符串。

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

ES6對象新增方法

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

一、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

二、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是如何在這麼強大的對象上面繼續加強功能呢？

一、容許改變對象原型

改變對象原型，是指在對象實例化以後，能夠改變對象原型。咱們使用 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

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

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

方法的定義

ES6明確了方法的定義。

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

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

總結

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

咱們平時開發中比較經常使用的是前面4種新增的功能，尤爲是Object.assign()的使用。可是，就算把所有新增的功能記住也不是難事。因此，全都記住吧！

=> 返回文章目錄