摘要：將對(duì)象的屬性拷貝到了對(duì)象，合并成一個(gè)新的對(duì)象。而這種行為也是新增的標(biāo)準(zhǔn)?？偨Y(jié)本章講解了對(duì)象字面量語(yǔ)法拓展，新增方法，允許重復(fù)的對(duì)象字面量屬性，自有枚舉屬性排序，增強(qiáng)對(duì)象原型，明確了方法的定義。但是，就算把全部新增的功能記住也不是難事。

變量功能被加強(qiáng)了、函數(shù)功能被加強(qiáng)了，那么作為JavaScript中最普遍的對(duì)象，不加強(qiáng)對(duì)得起觀(guān)眾嗎？

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

1、普通對(duì)象

2、特異對(duì)象

3、標(biāo)準(zhǔn)對(duì)象

4、內(nèi)建對(duì)象

隨便打開(kāi)一個(gè)js文件，對(duì)象都無(wú)處不在，看一個(gè)簡(jiǎn)單的對(duì)象。

{
  a: 2
}

ES6針對(duì)對(duì)象的語(yǔ)法擴(kuò)展了一下功能

1、屬性初始值簡(jiǎn)寫(xiě)

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

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

2、對(duì)象方法簡(jiǎn)寫(xiě)

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

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

3、屬性名可計(jì)算

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

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

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

1、Object.is()

用來(lái)解決JavaScript中特殊類(lèi)型 == 或者 === 異常的情況。

下面是一些異常情況

//實(shí)際出現(xiàn)了異常(錯(cuò)誤輸出)
console.log(NaN === NaN) // false
console.log(+0 === -0) // true
console.log(5 == "5") //true

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

為了解決歷遺留問(wèn)題，新增了Object.is()來(lái)處理2個(gè)值的比較。

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

2、Object.assign()

也許你已經(jīng)見(jiàn)過(guò)或者使用過(guò)這個(gè)方法了，那這個(gè)新增的方法解決了什么問(wèn)題呢？

答：混合（Mixin）。

mixin是一個(gè)方法，實(shí)現(xiàn)了拷貝一個(gè)對(duì)象給另外一個(gè)對(duì)象，返回一個(gè)新的對(duì)象。

下面是一個(gè)mixin方法的實(shí)現(xiàn)，這個(gè)方法實(shí)現(xiàn)的是淺拷貝。將b對(duì)象的屬性拷貝到了a對(duì)象，合并成一個(gè)新的對(duì)象。

//mixin不只有這一種實(shí)現(xiàn)方法。
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}}

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

假設(shè)要實(shí)現(xiàn)上面的mixin方法，你只需要給Object.assign()傳入?yún)?shù)即可。

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

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

看一個(gè)實(shí)現(xiàn)Component的例子。

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

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

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

ES5的嚴(yán)格模式下，如果你的對(duì)象中出現(xiàn)了key相同的情況，那么就會(huì)拋出錯(cuò)誤。而在ES6的嚴(yán)格模式下，不會(huì)報(bào)錯(cuò)，后面的key會(huì)覆蓋掉前面相同的key。

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

這個(gè)概念看起來(lái)比較模糊，如果你看了下面的例子，你可能就會(huì)明白在說(shuō)什么了。

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

上面的例子的輸出結(jié)果都有個(gè)規(guī)律，就是數(shù)字提前，按順序排序，接著是字母排序。而這種行為也是ES6新增的標(biāo)準(zhǔn)。你還可以自己測(cè)試一下其他方法是不是也支持枚舉自動(dòng)排序。比如Object.keys(), for in 等。

如果你想定義一個(gè)對(duì)象，你會(huì)想到很多方法。

let a = {}

let b = Object.create(a)

function C() {}

class D {}

那么，ES6是如何在這么強(qiáng)大的對(duì)象上面繼續(xù)增強(qiáng)功能呢？

1、允許改變對(duì)象原型

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

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、簡(jiǎn)化原型訪(fǎng)問(wèn)的super引用

這一個(gè)知識(shí)你可以看書(shū)籍原文，我目前想不到實(shí)際業(yè)務(wù)代碼來(lái)分析。

ES6明確了方法的定義。

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

估計(jì)習(xí)慣了函數(shù)和方法切換的我們，還是不用太在意這些具體的叫法。

本章講解了對(duì)象字面量語(yǔ)法拓展，ES6新增方法，允許重復(fù)的對(duì)象字面量屬性，自有枚舉屬性排序，增強(qiáng)對(duì)象原型，明確了方法的定義。

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

=> 返回文章目錄