new class { ... } の便利な使い方
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ オブジェクトリテラルで書くときに別プロパティの値を使えない不便さが解消される
◆ do 式代わりの使い方が即時関数実行より見やすい
◆ do 式代わりの使い方が即時関数実行より見やすい
オブジェクトを作るとき 空オブジェクトを用意して 1 つずつ追加していく方法はあまり好きじゃないです
1 つのオブジェクトリテラルでプロパティとその値を定義するような書き方のほうが見やすいです
ですが 別のプロパティに依存する値の場合に困ります
foo は 1 で bar は foo に 1 足した値にしたいです
直接 2 と書くと foo を変えたときに更新し忘れることがありますし bar のようなプロパティが多くなってくると修正が手間です
また 1 のような固定でなく関数の結果の場合 何度も関数を呼びたくないという理由もあります
getter を使えば this.foo を参照することが可能ですが 毎回 getter 関数を呼び出すことになります
foo が実行中に変更された場合に 常に bar は foo + 1 であるべきならこうしないといけないですが 初期値だけの場合は問題になります
foo が 10 になると bar は 11 になってしまい 初期の 2 を保持できなくなります
なので こういうケースはあとからプロパティを追加するか 変数を作ることになります
次でしか使わない値を変数にしてスコープに残したくないですし かと言って下側のやりかたは bar が別の方法で設定されるのでわかりづらいです
スコープの都合に対処するなら 即時関数実行を使えます
ただこれのために関数実行するのもなぁと思いますし パット見でわかりやすいとはいいづらいです
do 式があればなぁと毎回思いますが全然 stage が進んでくれません
クラスプロパティの記法なら this.foo ですでに定義したプロパティを参照できます
要らないと思ってるプライベートプロパティもこの使い方に限れば有用です
一時データを入れるのに使えて最終的なオブジェクトでは見えないプロパティなので Object.entries などで影響を受けません
devtools ではプライベートプロパティの値も見れるのでデバッグ的な用途でも変えます(GC されずメモリが無駄に消費されてる?)
即時関数実行の場合
new class {} の場合
こっちの場合はほしいものだけ分割代入機能で取り出すのでいらないものをプライベートにする必要はありません
見やすさ的にこっちのほうが好きなのですが 即時関数実行と違って構文的に if や for などの文を書けません
?: や map メソッドなどにする必要があります
1 つのオブジェクトリテラルでプロパティとその値を定義するような書き方のほうが見やすいです
ですが 別のプロパティに依存する値の場合に困ります
const value = {
foo: 1,
bar: this.foo + 1, // Error
baz: 3,
}
foo は 1 で bar は foo に 1 足した値にしたいです
直接 2 と書くと foo を変えたときに更新し忘れることがありますし bar のようなプロパティが多くなってくると修正が手間です
また 1 のような固定でなく関数の結果の場合 何度も関数を呼びたくないという理由もあります
getter を使えば this.foo を参照することが可能ですが 毎回 getter 関数を呼び出すことになります
foo が実行中に変更された場合に 常に bar は foo + 1 であるべきならこうしないといけないですが 初期値だけの場合は問題になります
foo が 10 になると bar は 11 になってしまい 初期の 2 を保持できなくなります
const value = {
foo: 1,
get bar() { return this.foo + 1 },
baz: 3,
}
なので こういうケースはあとからプロパティを追加するか 変数を作ることになります
const foo = 1
const value = {
foo,
bar: foo + 1,
baz: 3,
}
const value = {
foo: 1,
baz: 3,
}
value.bar = value.foo + 1
次でしか使わない値を変数にしてスコープに残したくないですし かと言って下側のやりかたは bar が別の方法で設定されるのでわかりづらいです
スコープの都合に対処するなら 即時関数実行を使えます
const value = (() => {
const foo = 1
return {
foo: 1,
bar: foo + 1,
baz: 3,
}
})()
ただこれのために関数実行するのもなぁと思いますし パット見でわかりやすいとはいいづらいです
do 式があればなぁと毎回思いますが全然 stage が進んでくれません
new class {} をオブジェクトリテラル代わりに
そこで発見した書き方がこれですconst value = new class {
foo = 1
bar = this.foo + 1
baz = 3
}
クラスプロパティの記法なら this.foo ですでに定義したプロパティを参照できます
要らないと思ってるプライベートプロパティもこの使い方に限れば有用です
const value = new class {
foo = 1
#tmp = fn()
bar = fn(this.#tmp, this.#tmp)
baz = 3
}
一時データを入れるのに使えて最終的なオブジェクトでは見えないプロパティなので Object.entries などで影響を受けません
devtools ではプライベートプロパティの値も見れるのでデバッグ的な用途でも変えます(GC されずメモリが無駄に消費されてる?)
do 式代わりに
new class {} は do 式代わりにも使えます即時関数実行の場合
const value = (() => {
const foo = fn()
const bar = fn(foo)
const baz = fn(foo, bar)
const result = baz ? foo : bar
return result
})()
new class {} の場合
const { result } = new class {
foo = fn()
bar = fn(this.foo)
baz = fn(this.foo, this.bar)
result = this.baz ? this.foo : this.bar
}
こっちの場合はほしいものだけ分割代入機能で取り出すのでいらないものをプライベートにする必要はありません
見やすさ的にこっちのほうが好きなのですが 即時関数実行と違って構文的に if や for などの文を書けません
?: や map メソッドなどにする必要があります