Починаючи з ECMAScript 2015, з'явився скорочений спосіб визначення методів для обєктів. Який допоможе вам простіше привязати функцію до імя методу обєкта.
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.
Синтаксис
var obj = {
property( parameters… ) {},
*generator( parameters… ) {},
async property( parameters… ) {},
async* generator( parameters… ) {},
// з обчисленими ключами:
[property]( parameters… ) {},
*[generator]( parameters… ) {},
async [property]( parameters… ) {},
// порівняйте getter/setter синтаксис:
get property() {},
set property(value) {}
};
Опис
Скорочений синтаксис подібний до синтаксису getter і setter оголошенних в ECMAScript 2015.
Отже, цей код:
var obj = {
foo: function() {
/* код */
},
bar: function() {
/* код */
}
};
Ви здатні скоротити до:
var obj = {
foo() {
/* код */
},
bar() {
/* код */
}
};
Генераторні методи
Генераторні методи також можуть бути визначенні за допомогою скороченного синтаксису. Користуючить ними:
- зірочка (*) повинна бути перед іменем генераторного методу. Тобто,
* g(){}- це працюватиме,g *(){}- це ні. - всі не генераторні визначення методів не можуть використовувати ключове слово
yield. Це означає, що застарілі генераторні функції також не працюватимуть і викинутьSyntaxError. Завжди використовуйтеyieldразом із зірочкою (*).
// Використовуючи названу властивіть
var obj2 = {
g: function* () {
var index = 0;
while (true)
yield index++;
}
};
// Ідентичний обєкт використовуючи скорочений синтаксис
var obj2 = {
* g() {
var index = 0;
while (true)
yield index++;
}
};
var it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1
Async методи
Async methods також можуть бути визначенні використовуючи скорочення.
// Використовуючи названу властивіть
var obj3 = {
f: async function () {
await some_promise;
}
};
// Ідентичний обєкт використовуючи скорочений синтаксис
var obj3 = {
async f() {
await some_promise;
}
};
Async генераторні методи
Генераторні методи також можуть бути async.
var obj4 = {
f: async function* () {
yield 1;
yield 2;
yield 3;
}
};
// Ідентичний обєкт використовуючи скорочений синтаксис
var obj4 = {
async* f() {
yield 1;
yield 2;
yield 3;
}
};
Визначенні методи за допомогою скорочення - не є конструкторами
Любі визначенні методи за допомогою скорочення не є конструктором і викинуть TypeError, якщо ви попробуєте створити екземпляр обєкту за допомогою них.
var obj = {
method() {}
};
new obj.method; // TypeError: obj.method is not a constructor
var obj = {
* g() {}
};
new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
Приклади
Базові випадки
var obj = {
a: 'foo',
b() { return this.a; }
};
console.log(obj.b()); // "foo"
Обчисленні імена властивостей
Скороченний синтаксис також підтримує обчисленні імена властивостей.
var 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
Специфікації
| Specification | Status | Comment |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Method definitions' in that specification. |
Standard | Initial definition. |
| ECMAScript 2016 (ECMA-262) The definition of 'Method definitions' in that specification. |
Standard | Changed that generator methods should also not have a [[Construct]] trap and will throw when used with new. |
| ECMAScript (ECMA-262) The definition of 'Method definitions' in that specification. |
Living Standard |
Підтримка браузерів
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Method definitions | Chrome Full support 39 | Edge Full support 12 | Firefox Full support 34 | IE No support No | Opera Full support 26 | Safari Full support 9 | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android Full support 34 | Opera Android Full support 26 | Safari iOS Full support 9 | Samsung Internet Android Full support 4.0 | nodejs Full support Yes |
| Async generator methods | Chrome Full support 63 | Edge Full support 79 | Firefox Full support 55 | IE No support No | Opera Full support 50 | Safari Full support 12 | WebView Android Full support 63 | Chrome Android Full support 63 | Firefox Android Full support 55 | Opera Android Full support 46 | Safari iOS Full support 12 | Samsung Internet Android Full support 8.0 | nodejs
Full support
10.0.0
|
| Async methods | Chrome Full support 55 | Edge Full support 15 | Firefox Full support 52 | IE No support No | Opera Full support 42 | Safari Full support 10.1 | WebView Android Full support 55 | Chrome Android Full support 55 | Firefox Android Full support 52 | Opera Android Full support 42 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 | nodejs
Full support
7.6.0
|
| Generator methods are not constructable (ES2016) | Chrome Full support 42 | Edge Full support 13 | Firefox Full support 43 | IE No support No | Opera Full support 29 | Safari Full support 9.1 | WebView Android Full support 42 | Chrome Android Full support 42 | Firefox Android Full support 43 | Opera Android Full support 29 | Safari iOS Full support 9.3 | Samsung Internet Android Full support 4.0 | nodejs Full support 6.0.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.