ES6 对象的新功能与解构赋值介绍

es6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用，并通过解构简化对象的数据提取过程。

一、字面量语法扩展

在 es6 模式下使用字面量创建对象更加简洁，对于对象属性来说，属性初始值可以简写，并可以使用可计算的属性名称。对象方法的定义消除了冒号和 function 关键字，示例如下：

// demo1
var value = "name", age = 18
var person = {
 age, // age: age
 ['my' + value]: 'jenny', // myname
 sayname () { // sayname: function()
  console.log(this.myname)
 }
}
console.log(person.age) // 18
console.log(person.myname) // jenny
person.sayname(); // jenny

针对重复定义的对象字面量属性，es5严格模式下会进行重复属性检查从而抛出错误，而es6移除了这个机制，无论严格模式还是非严格模式，同名属性都会取最后一个值。

// demo2
var person = {
 ['my' + value]: 'jenny',
 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() // jenny
console.log(friend.age) // 18
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: 'jenny',
 sayname () { 
  console.log(this.myname)
 }
}

// 创建原型为 person 的 coder 对象
let coder = object.create(person) 
coder.sayname() // jenny
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)
 }
}

// 设置 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")
 }
}

function sharename () {
  console.log("no homeobject")
}

coder5 对象的 sayname( ) 方法的[[homeobject]]属性值为 coder5，而 function 定义的 sharename( ) 没有将其赋值给对象，所以没有定义其[[homeobject]]属性，这在使用super时很重要。

super就是在[[homeobject]]属性上调用object.getprototypeof()获得原型的引用，然后搜索原型得到同名函数，最后设置 this 绑定调用相应方法。

四、解构赋值

es6 为数组和对象字面量提供了新特性——解构，可以简化数据提取的过程，减少同质化的代码。解构的基本语法示例如下：

let user = {
 name: 'jenny',
 id: 18
}
let {name, id} = user
console.log(name, id) // jenny 18

注意在这段代码中，user.name 存储在与对象属性名同名的 name 变量中。

4.1 默认值

如果解构时变量名称与对象属性名不同，即在对象中不存在，那么这个变量会默认为undefined：

let user = {
 name: 'jenny',
 id: 18
}
let {name, id, job} = user
console.log(name, id, job) // jenny 18 undefined

4.2 非同名变量赋值

非同名变量的默认值为undefined，但更多时候是需要为其赋值的，并且会将对象属性值赋值给非同名变量。es6 为此提供了扩展语法，与对象字面量属性初始化程序很像：

let user = {
 name: 'jenny',
 id: 18
}
let {name, id = 16, job = 'engineer'} = user
console.log(name, id, job) // jenny 18 engineer

let {name: localname, id: localid} = user
console.log(localname, localid) // jenny 18

let {name: othername = 'lee', job: otherjob = 'teacher'} = user
console.log(othername, otherjob) // jenny teacher

可以看出这种语法实际与对象字面量相反，赋值名在冒号左，变量名在右，并且解构赋值时，只是更新了默认值，不能覆盖对象原有的属性值。

4.3 嵌套解构

解构嵌套对象的语法仍然类似对象字面量，使用花括号继续查找下层结构：

let user = {
 name: 'jenny',
 id: 18,
 desc: {
  pos: {
   lng: 111,
   lat: 333
  }
 }
}

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 执行环境中的对象
所有标准对象都是内建对象

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。