ES6 通過字面量語法擴展、新增方法、改進原型等多種方式加強對象的使用，並通過解構簡化對象的數據提取過程。
一、字面量語法擴展
在 ES6 模式下使用字面量創建對象更加簡潔，對於對象屬性來說，屬性初始值可以簡寫，並可以使用可計算的屬性名稱。對象方法的定義消除了冒號和 function 關鍵字，示例如下：
// Demo1
var value = "name", age = 864305860
var person = {
age, // age: age
['my' + value]: '前端全棧開發交流圈', // myname
sayName () { // sayName: function()
console.log(this.myname)
}
}
console.log(person.age) // 864305860
console.log(person.myname) // 前端全棧開發交流圈
person.sayName(); //前端全棧開發交流圈
針對重複定義的對象字面量屬性，ES5嚴格模式下會進行重複屬性檢查從而拋出錯誤，而ES6移除了這個機制，無論嚴格模式還是非嚴格模式，同名屬性都會取最後一個值。
// demo2
var person = {
['my' + value]: '前端全棧開發交流圈：619586920',
myname: 'Tom',
myname: 'Lee',
}
console.log(person.myname) // Lee
二、新增方法
從 ES5 開始遵循的一個設計目標是，避免創建新的全局函數，也不在object.prototype上創建新的方法。
為了是某些任務更容易實現，ES6 在全局 Object 對象上引入一些新的方法。
2.1 Object.is( )
ES6 引入Object.is()方法來彌補全等運算符的不準確計算。
全等運算符在比較時不會觸發強制轉換類型，Object.is()運行結果也類似，但對於 +0 和 -0（在 JS 引擎中為兩個不同實體）以及特殊值NaN的比較結果不同，示例來看：
// demo3
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(Object.is(5, '5')) // false
console.log(+0 == -0) // true
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false
console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true
總結來說，Object.is()對所有值進行了更嚴格等價判斷。當然，是否使用Object.is()代替全等操作符（===）取決於這些特殊情況是否影響代碼。
2.2 Object.assign( )
ES6 添加Object.assign()來實現混合（Mixin）模式，即一個對象接收另一個對象的屬性和方法。注意是接收而不是繼承，例如接收 demo1 中的對象：
// demo4
var friend = {}
Object.assign(friend, person)
friend.sayName() // 前端全棧開發交流圈
console.log(friend.age) // 864305860
console.log(Object.getPrototypeOf(friend) === person) // false
在Object.assign()之前，許多 JS 庫自定義了混合方法 mixin( ) 來實現對象組合，代碼類似於：
function mixin(receiver, supplier) {
Object.keys(supplier).forEach(function (key) {
receiver[key] = supplier[key]
})
return receiver
}
可以看出 mixin( ) 方法使用“=”賦值操作，並不能複製訪問器屬性，同理Object.assign()也不能複製訪問器屬性，只是執行了賦值操作，訪問器屬性最終會轉變為接收對象的數據屬性。示例如下：
// demo5
var animal = {
name: 'lili',
get type () {
return this.name + type
},
set type (news) {
type = news
}
}
animal.type = 'cat'
console.log(animal.type) // lilicat
var pet = {}
Object.assign(pet, animal)
console.log(animal) // { name: 'lili', type: [Getter/Setter] }
console.log(pet) // { name: 'lili', type: 'lilicat' }
2.3 Object.setPrototypeOf( )
正常情況下對通過構造函數或Object.create()創建時，原型是被指定的。ES6 添加Object.setPrototypeOf() 方法來改變對象的原型。
例如創建一個繼承 person 對象的 coder 對象，然後改變 coder 對象的原型：
// demo6
let person = {
myname: '前端全棧開發交流圈',
sayName () {
console.log(this.myname)
}
}
// 創建原型為 person 的 coder 對象
let coder = Object.create(person)
coder.sayName() // 前端全棧開發交流圈
console.log(Object.getPrototypeOf(coder) === person) // true
let hero = {
myname: 'lee',
sayName () {
console.log(this.myname)
}
}
// 改變 coder 對象的原型為 hero
Object.setPrototypeOf(coder, hero)
coder.sayName() // lee
console.log(Object.getPrototypeOf(coder) === hero) // true
對象原型被存儲在內部專有屬性[[Prototype]]，調用Object.getPrototypeOf()返回存儲在其中的值，調用Object.setPrototypeOf()改變其值。這個方法加強了對對象原型的操作，下一節重點講解其它操作原型的方式。
三、增強對象原型
原型是 JS 繼承的基礎，ES6 針對原型做了很多改進，目的是更靈活地方式使用原型。除了新增的Object.setPrototypeOf()改變原型外，還引入Super關鍵字簡化對原型的訪問，
3.1 Super關鍵字
ES6 引入Super來更便捷的訪問對象原型，上一節介紹 ES5 可以使用Object.getPrototypeOf()返回對象原型。舉例說明Super的便捷，當對象需要複用原型方法，重新定義自己的方法時，兩種實現方式如下：
// demo7
let coder1 = {
getName () {
console.log("coder1 name: ")
Object.getPrototypeOf(this).sayName.call(this)
}//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
}
// 設置 coder1 對象的原型為 hero（demo6）
Object.setPrototypeOf(coder1, hero)
coder1.getName() // coder1 name: lee
let coder2 = {
getName () {
console.log("coder2 name: ")
super.sayName()
}
}
Object.setPrototypeOf(coder2, hero)
coder2.getName() // coder2 name: lee
在 coder1 對象的 getName 方法還需要call(this)保證使用的是原型方法的 this，比較複雜，並且在多重繼承會出現遞歸調用棧溢出錯誤，而直接使用Super就很簡單安全。
注意必須在簡寫方法中使用Super，要不然會報錯，例如以下代碼運行語法錯誤：
let coder4= {
getName: function () { // getName () 正確
super.sayName() // SyntaxError: 'super' keyword unexpected here
}
因為在例子中 getName 成為了匿名 function 定義的屬性，在當前上下問調用Super引用是非法的。如果不理解，可以進一步看下方法的從屬對象。
3.2 方法的從屬對象
ES6 之前“方法”是具有功能而非數據的對象屬性，ES6 正式將方法定義為有 [[HomeObject]]內部屬性的函數。
[[HomeObject]]屬性存儲當前方法的從屬對象，例如：
let coder5 = {
sayName () {
console.log("I have HomeObject")
}//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
}
function shareName () {
console.log("No HomeObject")
}
coder5 對象的 sayName( ) 方法的[[HomeObject]]屬性值為 coder5，而 function 定義的 shareName( ) 沒有將其賦值給對象，所以沒有定義其[[HomeObject]]屬性，這在使用Super時很重要。
Super就是在[[HomeObject]]屬性上調用Object.getPrototypeOf()獲得原型的引用，然後搜索原型得到同名函數，最後設置 this 綁定調用相應方法。
四、解構賦值
ES6 為數組和對象字面量提供了新特性——解構，可以簡化數據提取的過程，減少同質化的代碼。解構的基本語法示例如下：
let user = {
name: '前端全棧開發交流圈',
id: 864305860
}
let {name, id} = user
console.log(name, id) // 前端全棧開發交流圈 864305860
注意在這段代碼中，user.name 存儲在與對象屬性名同名的 name 變量中。
4.1 默認值
如果解構時變量名稱與對象屬性名不同，即在對象中不存在，那麼這個變量會默認為undefined：
let user = {
name: '前端全棧開發交流圈',
id: 864305860
}
let {name, id, job} = user
console.log(name, id, job) // 前端全棧開發交流圈 864305860 undefined
4.2 非同名變量賦值
非同名變量的默認值為undefined，但更多時候是需要為其賦值的，並且會將對象屬性值賦值給非同名變量。ES6 為此提供了擴展語法，與對象字面量屬性初始化程序很像：
let user = {
name: '前端全棧開發交流圈',
id: 864305860
}
let {name, id = 16, job = 'engineer'} = user
console.log(name, id, job) // 前端全棧開發交流圈 864305860 engineer
let {name: localName, id: localId} = user
console.log(localName, localId) // 前端全棧開發交流圈 864305860
let {name: otherName = 'lee', job: otherJob = 'teacher'} = user
console.log(otherName, otherJob) // 前端全棧開發交流圈 teacher
可以看出這種語法實際與對象字面量相反，賦值名在冒號左，變量名在右，並且解構賦值時，只是更新了默認值，不能覆蓋對象原有的屬性值。
4.3 嵌套解構
解構嵌套對象的語法仍然類似對象字面量，使用花括號繼續查找下層結構：
let user = {
name: '前端全棧開發交流圈',
id: 864305860,
desc: {
pos: {
lng: 111,
lat: 333
}
}
}
//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
let {desc: {pos}} = user
console.log(pos) // { lng: 111, lat: 333 }
let {desc: {pos: {lng}}} = user
console.log(lng) // 111
let {desc: {pos: {lng: longitude}}} = user
console.log(longitude) // 111
五、對象類別
ES6 規範定義了對象的類別，特別是針對瀏覽器這樣的執行環境。
- 普通（Ordinary）對象
- 具有 JS 對象所有的默認內部行為
- 特異（Exotic）對象
- 具有某些與默認行為不符的內部行為
- 標準（Standard）對象
- ES6 規範中定義的對象
- 可以是普通對象或特異對象，例如 Date、Array 等
- 內建對象
- 腳本開始執行時存在於 JS 執行環境中的對象
- 所有標準對象都是內建對象
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
對前端的技術，前端全棧技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的前端開發攻城師學習資料
知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！
閱讀更多 前端攻城小牛 的文章
