メソッド定義
ECMAScript 2015 より、オブジェクトイニシャライザーのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の簡略構文です。
試してみましょう
構文
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
キーワードを入れることはできません。つまり 旧式のジェネレーター関数 (en-US)は動作せず、SyntaxError
が発生します。yield
は常にアスタリスク (*
) と一緒に使ってください。
// 名前付きプロパティを使用
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
非同期メソッド
非同期メソッドも簡略構文を使用して定義することができます。
// 名前付きプロパティ
const obj3 = {
f: async function () {
await some_promise
}
}
// 簡略構文を使用して同じオブジェクトを生成
const obj3 = {
async f() {
await some_promise
}
}
非同期ジェネレーターメソッド
ジェネレーターメソッドも非同期関数にすることができます。
const obj4 = {
f: async function* () {
yield 1
yield 2
yield 3
}
};
// 簡略構文を使用して同じオブジェクトを生成
const obj4 = {
async* f() {
yield 1
yield 2
yield 3
}
}
メソッド定義はコンストラクターではない
メソッドがコンストラクターになることはできません。インスタンス化しようとすると TypeError
が発生します。
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 で変更)
例
簡単なテストケース
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
仕様書
Specification |
---|
ECMAScript Language Specification # sec-method-definitions |
ブラウザーの互換性
BCD tables only load in the browser