深入理解ES6之扩展的对象功能

对象字面量语法的扩展

键值对简写
当一个对象的键和值的标识符相同时，可以省略值的标识符

// es5
function createPerson(name, age) {
  return {
    name: name,
    age: age
  }
}

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

对象方法简写（可省略function关键字）

var obj = {
  name: 'JavaScript',
  getName() {
    return this.name
  }
}

访问一个对象键对应值的三种方式：

var person = {
  name: 'es6',
  age: 5
}

console.log(person.name)
console.log(person['name'])
var name = 'name'
console.log(person[name])
// [] 内可以进行属性计算

新增的对象方法

Object.is() - 判断个值是否相等

+0 === -0    // true
Object.is(+0, -0)    // false
NaN === NaN    // false
Object.is(NaN, NaN)    // true

联想：如何判断空对象和空数组？

var emptyObj = {}
emptyObj === {}    // false
/**
 * 由于JavaScript存储引用值的方式是存储引用地址
 * 通过引用地址建立与原始值的连接
 * 即使是两个形状、值相同的对象，它们的引用地址也是不同的
 * 所以不可能相等
 */

连个字符串之间可以很方面的比较值是否相同，所以可以通过JSON.stringify()对对象类型的值做一层处理，即可实现准确的比较。

var emptyObj = {}
JSON.stringify(emptyObj) === JSON.stringify({})

Object.assign()

方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

var target = {
  name: 'es6',
  getName: function () {
    return this.name
  }
}

var source = {
  name: 'es6+',
  getName: 'es6+'
}

Object.assign(target, source)
// 如果有相同的可枚举属性，后面的会覆盖前面的
console.log(target)   // { name: 'es6+', getName: 'es6+' }

Vue中的mixin

重复的对象字面量属性

ES5 严格模式为重复的对象字面量属性引入了一个检查，若找到重复的属性名，就会抛出错误。ES6 移除了重复属性的检查，严格模式与非严格模式都不再检查重复的属性。当存在重复属性时，排在后面的属性的值会成为该属性的实际值。

对象属性的枚举顺序

在对对象进行枚举的时候，不会按照代码书写时的顺序返回对应的属性，而是按照一定的规则返回。

所有的数字类型键，按升序排列。
所有的字符串类型键，按被添加到对象的顺序排列。
所有的符号类型键，也按添加顺序排列。

var person = {
  name: 'es6',
  age: 18,
  0: 'es5',
  1: 'es5+'
}
console.log(Object.keys(person))    // [ '0', '1', 'name', 'age' ]
console.log(Reflect.ownKeys(person))    // [ '0', '1', 'name', 'age' ]
console.log(Object.getOwnPropertyNames(person))   // [ '0', '1', 'name', 'age' ]
for(var prop in person) {
  console.log(prop)   // '0' '1' 'name' 'age'
}

原型的升级

修改对象的原型

一般来说，对象的原型会在通过构造器或Object.create()方法创建该对象时被指定。直到ES5 为止， JS 编程最重要的假定之一就是对象的原型在初始化完成后会保持不变。尽管ES5 添加了Object.getPrototypeOf()方法来从任意指定对象中获取其原型，但仍然缺少在初始化之后更改对象原型的标准方法。

Object.setPrototypeOf(target, source) 修改对象原型

var dog = {
  getSpecies: function () {
    console.log('dog')
  }
}

var cat = {
  getSpecies: function () {
    console.log('cat')
  }
}

var animal = Object.create(dog)
console.log(Object.getPrototypeOf(animal) === dog)    // true
Object.setPrototypeOf(animal, cat)
console.log(Object.getPrototypeOf(animal) === cat)    // true
// Object.getPrototypeOf() 是es5的方法，Object.setPrototypeOf() 是es6的方法

实例访问原型上的方法：

// es5
let dog = {
  sayHello() {
    return 'wang'
  }
}

let cat = {
  sayHello() {
    return 'miao'
  }
}

// 实例访问原型上的方法
// es5
var alive = {
  sayHello() {
    return Object.getPrototypeOf(this).sayHello.call(this) + ', dog'
  }
}

Object.setPrototypeOf(alive, cat)
console.log(alive.sayHello())

// es5
var alive = {
  sayHello() {
    return super.sayHello() + ', alive'
  }
}

es6增加了super关键词，实例可以通过super访问其原型

方法与函数的区别

在 ES6 之前，“方法”的概念从未被正式定义，它此前仅指对象的函数属性（而非数据属性）。 ES6 则正式做出了定义：方法是一个拥有[[HomeObject]]内部属性的函数，此内部属性指向该方法所属的对象。

let alive = {
  // 方法
  sayHello: function () {
    return 'hello!'
  }
}

// 不是方法
function sayHello() {
  return 'hello!'
}