【javascript】変数を関数名に使うことはできますか？

Question

前提・実現したいこと

各a要素にそれぞれの関数名を与え、各々で動作するプログラミングをしたいと考えています。
変数を使った関数名の表記は可能でしょうか？

例)
class = "0"のaにはfunction open_window0{...}
class = "1"のaにはfunction open_window1{...}
class = "2"のaにはfunction open_window2{...}
といった感じです。

該当のソースコード

<a class ="0" onmouseover="open_window0">red</a>
<a class ="1" onmouseover="open_window1">blue</a>
<a class ="2" onmouseover="open_window2">green</a>

・・・
<a class ="30" onmouseover="open_window30">black</a>

 function 'open_window + i'(){
   var elements = document.getElementsByClassName(i);
 ...と処理が続く
 }

試したこと

現在、forを使って関数名を量産することを考えています。
上記の関数名の表記が間違っていることはわかるのですが、調べても表記方法がわかりませんでした。
javascript初心者で、的外れな質問があったら申し訳ありません。よろしくお願いいたします。

Comments

[gentaro]

> 現在、forを使って関数名を量産することを考えています。

初心者の方が似たような質問をするケースを何度か目にしたことがありますが、一体どんな理由でそんな事をしたいと思うんですか？

[miyabi_pudding]

各要素のクリック時の処理を動的にしたいのでしょうけど、
メモリの無駄遣いと、だいたいにおいてメリットが何もないので、
関数は一個で、要素別に処理を分けた方がいいかと思いますが・・・。

[hoshi-takanori]

「高階関数」というものを学べば幸せになれるかもしれません。が、その前に学ぶべきことがたくさんありそうですね。

[K.Mu]

コメントありがとうございます。
勉強不足で申し訳ありません。デメリットが大きいのですね。
色な方向から別の方法を模索してみます。
結局、'open_window + i'のような感じで文字＋変数の関数名を作ることは不可能なのでしょうか？

[gentaro]

JavaScriptであればやりようは色々ありますが、そもそも関数は引数によって動作を分岐することができるので、全くもって意味が無いと思います。
他人の書いたコードをメンテするときにそんな事をやってたらキレるレベルで。

[K.Mu]

至らない点多く申し訳ありません。
関数で動作を分けることばかり考えていました。
精進します。

Answer 1

可能っちゃ可能です。
ただし、クラス名の先頭に数字は文法違反です。
（idは可能。だが、スタイルは当てれない）
CSSでのセレクタ指定などに、悪影響があります。

<!-- この書き方だと、関数名のあとに、()を付けないと発動しません。 -->
<a class="obj0" onmouseover="open_window0()">red</a>
<a class="obj1" onmouseover="open_window1()">blue</a>
<a class="obj2" onmouseover="open_window2()">green</a>

・・・
<a class ="obj30" onmouseover="open_window30()">black</a>

// ;にすべき箇所が、,になってたので修正
for(let i=0; i<31; i++){
  window['open_window' + i] = function() {
    var elements = document.getElementsByClassName('obj' + i);
    // ...と処理が続く
  };
}

他にも、関数名自体を文字列で動的に定義する方法はいくつかあります。

ただし、ぶっちゃけいろいろと無駄です。

なので、要素別に処理わけたいなら、下記のように、
関数自体は一個にして、呼び出した要素から処理を分けましょう。

<!-- classは一意の物には向かない。複数同じ形式のものを用意するのに向いている -->
<!-- よって、一意の要素を定義するにはidを使用する（JSの処理のみと、一意で有る限り数値を使用可能） -->
<a id="0" class="obj" onmouseover="open_window(this)">red</a>
<a id="1" class="obj" onmouseover="open_window(this)">blue</a>
<a id="2" class="obj" onmouseover="open_window(this)">green</a>

・・・
<a id="30" class="obj" onmouseover="open_window(this)">black</a>

function open_window(elm) {
  const i = Number(elm.id);
  // というか、elmにオンマウスした要素が入っているので、下記で変数定義の必要なし
  // var elements = document.getElementsByClassName('obj' + i);
  // ...と処理が続く
}

Comments

[K.Mu]

手取り足取りご説明していただきありがとうございます。
漠然としたモヤモヤが晴れました。
最後にご提案いただいた方向で考えていこうと思います。
本当にありがとうございました！