深刻理解ES6之《扩展对象》

属性初始值的简写

当对象字面量只有一个属性的名称时，JS引擎会在可访问做用域中查找其同名变量；若是找到则该变量的值被赋给对象字面量里的同名属性

function createPerson(name, age) {
  return {
    name,
    age
  }
}

对象方法的简写

var person = {
  name: 'angela',
  sayName() {
    console.log(this.name)
  }
}

可计算属性名

在ES5中若是属性名中包含空格或者是动态的字符串变量做为属性名，则须要用[]方括号来访问，以下所示

var person = {},
  lastName = 'last name';
person["first name"] = 'Li'
person[lastName] = 'yun hua'

这种方式适用于属性名提早已经或可被字符串字面量表示的状况，若是属性名“first name”被包含在一个变量中或者须要经过计算才获得该变量的值
ES6支持了可计算属性名
比方说上面的代码ES6可简化写成以下：

let lastName = 'last name';
var person = {
  "first name": 'Li',
  [lastName]: 'yun hua'
}

甚至方括号中内容一样可使用表达式做为属性的可计算名称

var suffix = 'name'
var person = {
  ['first ' + suffix]: 'Li',
  ['last ' + suffix]: 'yun hua'
}

也就是说任何可用于对象实例括号记法的属性名一样能够做为对象字面量中计算属性名

Object.is

因为全等===有一些特例：一、+0和-0相等 二、NaN和NaN不彻底相等
故ES6引用了Object.is方法来弥补全等运算符的不许备运算
对Object.is方法来讲，其运算结果大部分状况与===运算符相同，惟一区别在于+0和-0被识别为不相等，NaN和NaN被识别为相等

Object.assign

Object.assign方法接受任意数量的源对象，并按指定的顺序将属性复制到接收对象中，因此若是多个源对象具备同名属性，则排位靠后的源对象会覆盖排位靠前的
有一个须要特别注意的点是Object.assign方法不能将提供者的访问器属性复制到接收对象中，因为Object.assign执行了赋值操做，所以提供者的访问器属性最终会被转变为接收对象中的一个数据属性

var receiver = {},
  supplier = {
    get name() {
      return "file.js"
    }
  }
Object.assign(receiver, supplier)
var desc = Object.getOwnPropertyDescriptor(receiver, "name")
console.log(desc.value)//file.js
console.log(desc.get)//undefined

重复的对象字面量属性

在ES5严格模式下，对于对象字面量重复属性则会抛出错误
但在ES6严格模式下，不会报错，取值会选取最后一个

'use strict'
var person = {
  name: 'lisa',
  name: 'angela'
}
console.log(person.name)//angela

自有属性的枚举顺序

1. 全部数字键按升序排序

2. 全部字符串按照它们被加入对象的顺序排序

3. 全部symbol键按照它们被加入对象的顺序排序

var obj = {
  a: 1,
  0: 1,
  c: 1,
  2: 1,
  b: 1,
  1: 1
}
obj.d = 1
console.log(Object.getOwnPropertyNames(obj).join(''))//012acbd

改变对象的原型

ES5中能够经过Object.getPrototypeOf来返回任意指定对象的原型
ES6中添加了Object.setPrototypeOf来改变任意指定对象的原型

var person = {
  getGreeting() {
    return 'hello'
  }
}
var dog = {
  getGreeting() {
    return 'woof'
  }
}
let friend = Object.create(person)
console.log(friend.getGreeting())//hello
console.log(Object.getPrototypeOf(friend) === person)//true
Object.setPrototypeOf(friend, dog)
console.log(friend.getGreeting())//woof
console.log(Object.getPrototypeOf(friend) === dog)//true

简化了原型访问的Super引用

在ES5中若是要调用父类的方法，则通常是经过若是这种方式，也就是得到原型对象再经过call来调用
Object.getPrototypeOf(this).getGreeting.call(this)

var person = {
  getGreeting() {
    return 'hello'
  }
}
var dog = {
  getGreeting() {
    return 'woof'
  }
}
var friend = {
  getGreeting() {
    return Object.getPrototypeOf(this).getGreeting.call(this) + ",hi!";
  }
}
Object.setPrototypeOf(friend, person)
console.log(friend.getGreeting())//hello,hi!
console.log(Object.getPrototypeOf(friend) === person)//true
Object.setPrototypeOf(friend,dog)
console.log(friend.getGreeting())//woof,hi!
console.log(Object.getPrototypeOf(friend) === dog)//true

可是在多重继承的状况下，上述方法则会出错，举例来讲

var person = {
  getGreeting() {
    return 'hello'
  }
}
var friend = {
  getGreeting() {
    return Object.getPrototypeOf(this).getGreeting.call(this) + ",hi!";
  }
}
Object.setPrototypeOf(friend, person)
var relative = Object.create(friend)
console.log(person.getGreeting())//hello
console.log(friend.getGreeting())//hello,hi!
console.log(relative.getGreeting())// 报错 Uncaught RangeError: Maximum call stack size exceeded

ES6中经过super关键字可轻松解决问题

var person = {
  getGreeting() {
    return 'hello'
  }
}
var friend = {
  getGreeting() {
    return super.getGreeting.call(this) + ",hi!";
  }
}
Object.setPrototypeOf(friend, person)
var relative = Object.create(friend)
console.log(person.getGreeting())//hello
console.log(friend.getGreeting())//hello,hi!
console.log(relative.getGreeting())// hello,hi

你们可能会疑惑super是怎么作到知道真正的调用对象是哪一个
这实际上是由于ES6中正式将方法定义为一个函数，它会有一个内部的[[HomeObject]]属性来容纳这个方法从属的对象

var person = {
  // 是方法
  getGreeting() {
    return 'hello'
  }
}
function shareGreeting(params) {
  return 'Hi!'
}

person.getGreeting方法的[[HomeObject]]属性为person，而shareGreeting函数未将其赋值给一个对象，于是没有明肯定义其[[HomeObject]]属性

super的全部引用都经过[[HomeObject]]属性来肯定后续的运行过程

1. 在[[HomeObject]]属性上调用Object.getPrototypeOf方法来检索原型的引用

2. 搜索原型找以同名函数

3. 设置this绑定并调用相应的方法