学习ECMAScript 2015【3】Enhanced Object Literals

0. 讲在前面

对象字面量扩展语法，其实更多的是书写的便捷。

1.总览示例

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42
};

2.展开聊聊

2.1.支持proto注入

这个东西怎么说呢，有争议，在MDN Web Docs中Object.prototype.proto有这样的句子：

已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

__proto__属性已在ECMAScript 6语言规范中标准化，用于确保Web浏览器的兼容性，因此它未来将被支持。它已被不推荐使用, 现在更推荐使用Object.getPrototypeOf/Reflect.getPrototypeOf 和Object.setPrototypeOf/Reflect.setPrototypeOf（尽管如此，设置对象的[[Prototype]]是一个缓慢的操作，如果性能是一个问题，应该避免）。

虽然但是……这玩意儿我看到不少人在用，用得不亦乐乎。反正，尽量吧，尽量用官方推荐的方式。

2.2.函数类属性的省略语法

const obj = {
    //Before
    foo: function(){
        return 'foo';
    },

    //After
    bar(){
        return 'bar';
    }
}

在Vue里，我们基本上在methods中都是用新的方式来写了。

2.3.可动态计算的属性名

用表达式来表示属性，虽然增强了动态性，还是建议大家在合适的场景中使用，别滥用。

const prefix = 'ES6';
const obj = {
    [prefix + 'computedProperty']: 'henry'
}

其思想类似于Vue中的computed，都是希望变量能和其他部分联动，不再使用手动的方式来管理。其实这种感觉在编程世界中很常见，从我们编写windows窗口应用中监听事件开始，我们就开始体会这种有关联性的好处。其实在硬件编程中，也有类似的联动的设定，帮助我们快速进行响应，就像人的下意识自动的动作一样。

2.4.属性名定义简写

const foo = 'world';
const bar = (s) => s+ foo;

const obj = {
    foo,
    bar
}

3. 总结

新的语法确实便捷了敲代码，省去了不少重复代码。大家使用新的特性也不要怕，有Babel保护你，帮你兼容所有时代的浏览器。