メソッド定義
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
ECMAScript 2015 より、オブジェクトイニシャライザーのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の簡略構文です。
試してみましょう
構文
js
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… ) {},
};
解説
ジェネレーターメソッド
ジェネレーターメソッドも、同様に簡略構文を使用して定義することができます。
次のように行います。
- ジェネレータープロパティ名の前にアスタリスク (
*
) が必要です。すなわち、* g(){}
は動作しますが、g *(){}
は動作しません。 - 非ジェネレーターメソッド定義では
yield
キーワードを入れることはできません。つまり 旧式のジェネレーター関数は動作せず、SyntaxError
が発生します。yield
は常にアスタリスク (*
) と一緒に使ってください。
js
// 名前付きプロパティを使用
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
非同期メソッド
非同期メソッドも簡略構文を使用して定義することができます。
js
// 名前付きプロパティ
const obj3 = {
f: async function () {
await some_promise;
},
};
// 簡略構文を使用して同じオブジェクトを生成
const obj3 = {
async f() {
await some_promise;
},
};
非同期ジェネレーターメソッド
ジェネレーターメソッドも非同期関数にすることができます。
js
const obj4 = {
f: async function* () {
yield 1;
yield 2;
yield 3;
},
};
// 簡略構文を使用して同じオブジェクトを生成
const obj4 = {
async *f() {
yield 1;
yield 2;
yield 3;
},
};
メソッド定義はコンストラクターではない
メソッドがコンストラクターになることはできません。インスタンス化しようとすると TypeError
が発生します。
js
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 (ES2016 で変更)
例
簡単なテストケース
js
const obj = {
a: "foo",
b() {
return this.a;
},
};
console.log(obj.b()); // "foo"
計算されたプロパティ名
簡略構文は計算されたプロパティ名にも対応しています。
js
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
仕様書
Specification |
---|
ECMAScript Language Specification # sec-method-definitions |
ブラウザーの互換性
BCD tables only load in the browser