JavaScriptのオブジェクトリテラル初期化時に自身に定義した値を別のプロパティとして参照したい
イメージは↓
code:sample.js
const sample = {
a: 'aaa',
b: 'bbb',
c: this.a + this.b
}
だが、Object初期化のタイミングにおけるthisはここでいう’sample’にはならない. (それはそう)
じゃぁどうすればいいの？
code:sample2.js
const sample = {
a: 'aaa',
b: 'bbb',
c: function() { return this.a + this.b }, // sample.c()
get d() { // sample.d
return this.a + this.b
}
}
このようにしてやることで動く
cとdではそれぞれproperty functionとgetterのためcの場合は sample.c()のようにしてやる必要があり、dの場合はオブジェクトのgetterとなるためsample.dとして呼び出せる.
ref: https://stackoverflow.com/questions/4616202/self-references-in-object-literals-initializers
p.s. vue.jsとか使ってる時は割とシュッと使う書き方(※1)だけどふとVanilla JSでやろうとすると思い出せないなとなった
※1: https://vuejs.org/v2/guide/computed.html#Computed-Setter
---
ちなみに、c,dといったfunctionですがこれらは allow functionに書き換えはできません
ref: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#arrow_functions_used_as_methods
ref: https://stackoverflow.com/questions/33827519/es6-getter-setter-with-arrow-function
Object.defineProperty使えばallow functionによる定義もできそうですが、そこまでしてやりたいかと言われると...？