4、《深入理解ES6》笔记——扩展对象的功能性.md

变量功能被加强了、函数功能被加强了，那么作为JavaScript中最普遍的对象，不加强对得起观众吗？

对象类别

在ES6中，对象分为下面几种叫法。（不需要知道概念）

1、普通对象

2、特异对象

3、标准对象

4、内建对象

对象字面量语法拓展

随便打开一个js文件，对象都无处不在，看一个简单的对象。

    {
      a: 2
    }

ES6针对对象的语法扩展了一下功能

1、属性初始值简写

    //ES5
    function a(id) {
      return {
        id: id
      };
    };
    
    //ES6
    const a = (id) => ({
      id
    })

2、对象方法简写

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

3、属性名可计算

属性名可以传入变量或者常量，而不只是一个固定的字符串。

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

ES6对象新增方法

在Object原始对象上新增方法，原则上来说不可取，但是为了解决全世界各地提交的issue，在ES6中的全局Object对象上新增了一些方法。

1、Object.is()

用来解决JavaScript中特殊类型 == 或者 === 异常的情况。

下面是一些异常情况

    //实际出现了异常(错误输出)
    console.log(NaN === NaN) // false
    console.log(+0 === -0) // true
    console.log(5 == "5") //true
    
    //我们期望的目标输出(正确输出)
    console.log(NaN === NaN) // true
    console.log(+0 === -0) // false
    console.log(5 == "5") //false

为了解决历遗留问题，新增了Object.is()来处理2个值的比较。

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

2、Object.assign()

也许你已经见过或者使用过这个方法了，那这个新增的方法解决了什么问题呢？

答：混合（Mixin）。

mixin是一个方法，实现了拷贝一个对象给另外一个对象，返回一个新的对象。

下面是一个mixin方法的实现，这个方法实现的是浅拷贝。将b对象的属性拷贝到了a对象，合并成一个新的对象。

    //mixin不只有这一种实现方法。
    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}}

写这样一个mixin方法是不是很烦，而且每个项目都得引入这个方法，现在，ES6给我们提供了一个现成的方法Object.assign()来做mixin的事情。

假设要实现上面的mixin方法，你只需要给Object.assign()传入参数即可。

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

使用Object.assign()，你就可以不是有继承就能获得另一个对象的所有属性，快捷好用。 Object.assign 方法只复制源对象中可枚举的属性和对象自身的属性。 看一个实现Component的例子。

    //声明一个对象Component
    let Component = {}
    //给对象添加原型方法
    Component.prototype = {
      componentWillMount() {},
      componentDidMount() {},
      render() {console.log('render')}
    }
    //定义一个新的对象
    let MyComponent = {}
    //拷贝Component的方法和属性。
    Object.assign(MyComponent, Component.prototype)
    
    console.log(MyComponent.render()) // render

在react的reducer中，每次传入新的参数返回新的state，你都可能用到Object.assign()方法。

重复的对象字面量属性

ES5的严格模式下，如果你的对象中出现了key相同的情况，那么就会抛出错误。而在ES6的严格模式下，不会报错，后面的key会覆盖掉前面相同的key。

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

自有属性枚举顺序

这个概念看起来比较模糊，如果你看了下面的例子，你可能就会明白在说什么了。

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

上面的例子的输出结果都有个规律，就是数字提前，按顺序排序，接着是字母排序。而这种行为也是ES6新增的标准。你还可以自己测试一下其他方法是不是也支持枚举自动排序。比如Object.keys(), for in 等。

增强对象原型

如果你想定义一个对象，你会想到很多方法。

    let a = {}
    
    let b = Object.create(a)
    
    function C() {}
    
    class D {}

那么，ES6是如何在这么强大的对象上面继续增强功能呢？

1、允许改变对象原型

改变对象原型，是指在对象实例化之后，可以改变对象原型。我们使用 Object.setPrototypeOf() 来改变实例化后的对象原型。

    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、简化原型访问的super引用

这一个知识你可以看书籍原文，我目前想不到实际业务代码来分析。

方法的定义

ES6明确了方法的定义。

    let a = {
      //方法
      name() {
        return 'eryue'
      }
    }
    //函数
    function name() {}

估计习惯了函数和方法切换的我们，还是不用太在意这些具体的叫法。

总结

本章讲解了对象字面量语法拓展，ES6新增方法，允许重复的对象字面量属性，自有枚举属性排序，增强对象原型，明确了方法的定义。

我们平时开发中比较常用的是前面4种新增的功能，尤其是Object.assign()的使用。但是，就算把全部新增的功能记住也不是难事。所以，全都记住吧！

上一节：3.函数

下一节：5.解构：使数据访问更便捷