Starting with ECMAScript 2015, a shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
const obj = {
get property() {},
set property(value) {},
property( parameters… ) {},
*generator( parameters… ) {},
async property( parameters… ) {},
async* generator( parameters… ) {},
// with computed keys
get [property]() {},
set [property](value) {},
[property]( parameters… ) {},
*[generator]( parameters… ) {},
async [property]( parameters… ) {},
async* [generator]( parameters… ) {},
};
The shorthand syntax is similar to the getter and setter syntax introduced in ECMAScript 2015.
Given the following code:
const obj = {
foo: function() {
// ...
},
bar: function() {
// ...
}
}
You are now able to shorten this to:
const obj = {
foo() {
// ...
},
bar() {
// ...
}
}
Generator methods can be defined using the shorthand syntax as well.
When doing so:
*
) in the shorthand syntax must be
before
the generator property name. (That is,
* g(){}
will work, but
g *(){}
will not.)
Non-generator method definitions cannot contain the
yield
keyword. This means that
legacy generator functions
won't work either, and will throw a
SyntaxError
. Always use
yield
in conjunction with the asterisk (
*
).
// Using a named property
const obj2 = {
g: function* () {
let index = 0
while (true) {
yield index++
}
}
};
// The same object using shorthand syntax
const obj2 = {
* g() {
let index = 0
while (true) {
yield index++
}
}
};
const it = obj2.g()
console.log(it.next().value) // 0
console.log(it.next().value) // 1
Async methods can also be defined using the shorthand syntax.
// Using a named property
const obj3 = {
f: async function () {
await some_promise
}
}
// The same object using shorthand syntax
const obj3 = {
async f() {
await some_promise
}
}
Generator methods can also be async .
const obj4 = {
f: async function* () {
yield 1
yield 2
yield 3
}
};
// The same object using shorthand syntax
const obj4 = {
async* f() {
yield 1
yield 2
yield 3
}
}
Methods cannot be constructors! They will throw a
TypeError
if you try to instantiate them.
const objA = {
method() {}
}
new objA.method // TypeError: obj.method is not a constructor
const objB = {
* g() {}
}
new objB.g // TypeError: obj.g is not a constructor (changed in ES2016)
const obj = {
a: 'foo',
b() { return this.a }
};
console.log(obj.b()) // "foo"
The shorthand syntax also supports computed property names.
const bar = {
foo0: function() { return 0 },
foo1() { return 1 },
['foo' + 2]() { return 2 }
}
console.log(bar.foo0()) // 0
console.log(bar.foo1()) // 1
console.log(bar.foo2()) // 2
// A global function
function foo() {
return 1
}
let name = 'foo'
console.log(window[name]()) // 1
| 规范 |
|---|
|
ECMAScript (ECMA-262)
The definition of 'Method definitions' in that specification. |
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 方法定义 | Chrome 39 | Edge 12 | Firefox 34 | IE No | Opera 26 | Safari 9 | WebView Android 39 | Chrome Android 39 | Firefox Android 34 | Opera Android 26 | Safari iOS 9 | Samsung Internet Android 4.0 | nodejs Yes |
| Async generator methods | Chrome 63 | Edge 79 | Firefox 55 | IE No | Opera 50 | Safari 12 | WebView Android 63 | Chrome Android 63 | Firefox Android 55 | Opera Android 46 | Safari iOS 12 | Samsung Internet Android 8.0 |
nodejs
10.0.0
|
| Async methods | Chrome 55 | Edge 15 | Firefox 52 | IE No | Opera 42 | Safari 10.1 | WebView Android 55 | Chrome Android 55 | Firefox Android 52 | Opera Android 42 | Safari iOS 10.3 | Samsung Internet Android 6.0 |
nodejs
7.6.0
|
| Generator methods are not constructable (ES2016) | Chrome 42 | Edge 13 | Firefox 43 | IE No | Opera 29 | Safari 9.1 | WebView Android 42 | Chrome Android 42 | Firefox Android 43 | Opera Android 29 | Safari iOS 9.3 | Samsung Internet Android 4.0 | nodejs 6.0.0 |
完整支持
不支持
用户必须明确启用此特征。