学习ECMAScript 2015【3】Enhanced Object Literals

原创
2021/09/17 10:23
阅读数 123

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]]是一个缓慢的操作,如果性能是一个问题,应该避免)。

虽然但是……这玩意儿我看到不少人在用,用得不亦乐乎。这帮用户简直就是客户一样,对大神们说:

image.png

反正,尽量吧,尽量用官方推荐的方式。

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保护你,帮你兼容所有时代的浏览器。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部