对象字面量扩展

ES2015之前的ECMAScript标准中,对象字面量只是一种用于表达对象的语法。而在ES2015中,ECMAScript开发者开放了更多对于对象的操作权限,其中便有更多的对象字面量语法。

函数类属性的省略语法

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

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

有了这个语法糖,对象字面量中的方法看过去更像一个方法了,而不是一个以函数为值的属性。

支持proto注入

在Node.js的标准库中有一个名为events的库,提供了EventEmitter用于实现事件状态机的类。EventEmitter中包含了on、once、emit等用于对事件进行监听、触发的方法:

import { EventEmitter } from 'events'

const emitter = new EventEmitter()
emitter.on('event', msg => {
    console.log(`Received message: ${msg}`)
})

emitter.emit('event', 'Hello world')
//=> Received message: Hello World

在一般情况下,EventEmitter类的使用方式是将其作为一个类的父类,让子类继承EventEmitter:

class Machine extends EventEmitter { /* ... */ }

如果为了单一的实例而创建一个类,显得太过冗余。ES2015之前,我们可能会通过mixin或merge等方法将一个EventEmitter类的实例方法合并到一个对象中。
ES2015标准中,允许直接向一个对象字面量注入proto,使其直接成为指定类的一个实例:

import { EventEmitter } from 'events'

const machine = {
    __proto__: new EventEmitter(),
    method() { /* ... */ }
    // ...
}

console.log(machine) //=> EventEmitter {}
console.log(machine instanceof EventEmitter) //=> true

machine.on('event', msg => console.log(`Received message: ${msg}`))
machine.emit('event', 'Hello World')
//=> Received message: Hello World

machine.method(/* .... */)

动态计算属性名

const prefix = 'es2015:'
const obj = {
    [prefix + 'enhancedObject']: 'foobar'
}

将属性名定义省略

某些场景下,我们需要将已定义的变量作为对象字面量的属性值进行返回或传入操作。很多情况下,这些变量名和属性名都是相同的,这在ES2015中得到了新的语法糖支持:

const foo = 123
const bar = () => foo

const obj = {
    foo,
    bar
}

console.log(obj)  //=> { foo: 123, bar: [Function bar] }

你可能感兴趣的:(对象字面量扩展)