From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../functions/method_definitions/index.html | 218 +++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 files/ja/web/javascript/reference/functions/method_definitions/index.html (limited to 'files/ja/web/javascript/reference/functions/method_definitions') diff --git a/files/ja/web/javascript/reference/functions/method_definitions/index.html b/files/ja/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..14f21a5b91 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,218 @@ +--- +title: メソッド定義 +slug: Web/JavaScript/Reference/Functions/Method_definitions +tags: + - ECMAScript 2015 + - ECMAScript6 + - Functions + - JavaScript + - Object + - Syntax +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

ECMAScript 2015 より、オブジェクトイニシャライザのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の省略形です。

+ +
{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}
+ + + +

構文

+ +
const obj = {
+  get property() {},
+  set property(value) {},
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+  async property( parameters… ) {},
+  async* generator( parameters… ) {},
+
+  // 算出されたキーも使用可能:
+  get [property]() {},
+  set [property](value) {},
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+  async [property]( parameters… ) {},
+  async* [generator]( parameters… ) {},
+};
+
+ +

説明

+ +

簡略構文は、ECMAScript 第 5 版で導入された getter や setter 構文に似ています。

+ +

次のコードを例にすると:

+ +
var obj = {
+  foo: function() {
+    /* コード */
+  },
+  bar: function() {
+    /* コード */
+  }
+};
+
+ +

これを以下のように短縮することができます:

+ +
var obj = {
+  foo() {
+    /* コード */
+  },
+  bar() {
+    /* コード */
+  }
+};
+
+
+ +

短縮形ジェネレーターメソッド

+ +

Generator メソッドは同様に簡略構文を使用して定義することができます。

+ +

簡略構文では:

+ + + +
// 名前付きプロパティを使用 (ES6 より前)
+const obj2 = {
+  g: function*() {
+    let index = 0
+    while(true)
+      yield index++
+  }
+};
+
+// 簡略構文を使用して同じオブジェクトを生成
+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 メソッド

+ +

{{jsxref("Statements/async_function", "Async メソッド", "", 1)}}も簡略構文を使用して定義することができます。

+ +
// 名前付きプロパティ
+const obj3 = {
+  f: async function () {
+    await some_promise
+  }
+};
+
+// 簡略構文を使用して同じオブジェクトを生成
+const obj3 = {
+  async f() {
+    await some_promise
+  }
+};
+
+ +

Async ジェネレーターメソッド

+ +

Generator メソッドも {{jsxref("Statements/async_function", "async", "", 1)}} 関数にすることができます。

+ +
const obj4 = {
+  f: async function* () {
+    yield 1
+    yield 2
+    yield 3
+  }
+};
+
+// 簡略構文を使用して同じオブジェクトを生成
+const obj4 = {
+  async* f() {
+   yield 1
+   yield 2
+   yield 3
+  }
+};
+ +

メソッド定義はコンストラクタブルではない

+ +

すべてのメソッド定義がコンストラクターではない(簡略構文のみ！)ため、インスタンス化しようとすると {{jsxref("TypeError")}} が発生します。

+ +
const obj = {
+  method() {},
+};
+new obj.method // TypeError: obj.method is not a constructor
+
+const obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (ES2016 で変更)
+
+ +

例

+ +

簡単なテストケース

+ +
const obj = {
+  a: 'foo',
+  b() { return this.a }
+};
+console.log(obj.b()) // "foo"
+
+ +

計算されたプロパティ名

+ +

簡略構文は計算されたプロパティ名もサポートします。

+ +
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
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("javascript.functions.method_definitions")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf