Method definitions

Починаючи з ECMAScript 2015, появився скорочений спосіб визначення методів для обєктів. Який допоможе вам простіше привязати функцію до імя методу обєкта.

Синтаксис

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 Latest Draft (ECMA-262)
The definition of 'Method definitions' in that specification.
Draft

Підтримка браузерів

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Method definitionsChrome Full support 39Edge Full support YesFirefox Full support 34IE No support NoOpera Full support 26Safari Full support 9WebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 34Opera Android Full support 26Safari iOS Full support 9Samsung Internet Android Full support 4.0nodejs Full support Yes
Async generator methodsChrome Full support 63Edge ? Firefox Full support 55IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 55Opera Android Full support 46Safari iOS No support NoSamsung Internet Android Full support 8.0nodejs Full support 10.0.0
Full support 10.0.0
Full support 8.10.0
Disabled
Disabled From version 8.10.0: this feature is behind the --harmony runtime flag.
Async methodsChrome Full support 55Edge ? Firefox Full support 52IE No support NoOpera Full support 42Safari No support NoWebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 52Opera Android Full support 42Safari iOS No support NoSamsung Internet Android Full support 6.0nodejs Full support 7.6.0
Full support 7.6.0
Full support 7.0.0
Disabled
Disabled From version 7.0.0: this feature is behind the --harmony runtime flag.
Generator methods are not constructable (ES2016)Chrome Full support 42Edge ? Firefox Full support 43IE No support NoOpera Full support 29Safari No support NoWebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 43Opera Android Full support 29Safari iOS No support NoSamsung Internet Android Full support 4.0nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

Дивитися також