【jQuery】clickとかに書いた無名関数の中の変数の値を変更して扱う方法

jQuery11
この間Wikipedia読んでてたら、JavaScriptってジャバスとも略すと書いてあって
一瞬ジャバスwwwwwwwwwwwwwwwなんて思ったんですが、それも悪くないなと意識が変わりました。

JavaScriptで7音節、JSで4音節必要なのに対して、
ジャバスは3音節で済むため、少しずつ使用範囲が拡大している。

wikipediaより転載

そのうちトレンディーな略し方はジャバスになるかもしれませんね。
チェックしておきましょう。

jQuery使ってて昔よく思ってた事

無名関数の中で変更した変数の扱い方が分からなくて
clickでフラグ変えたりとかできないもんだと思ってました。
だからその後処理書きたければ、全てこのclickの中の無名関数で
処理していかないとダメなんだと思ってました。


jQuery(function(){

     var a;

     jQuery("button").click(function(){
              a = "a";
     });

     console.log(a); //undefined
});

こうやった際にaの中身が未定義になるからです。

何故未定義になるのか

クリックイベントが実行されたからといって、
もう一回jQuery関数が実行されるわけではないです。
JacaScriptの実行順序を見てもらえると、何となく分かる気がします。

JavaScriptの実行順序

実行順序図
この図のようになってます
これに加えて補足すると、

HTMLを解釈してる間に、script属性が最初に読み込まれて
次にasync属性が読み込まれ解釈が終わった時にdefer属性が読み込まれます。

async,defer属性についてはこのサイトが参考になります。

無名関数で定義しなおした変数を扱うには?

これだって回答出すととぶち殺されそうなので、
こういう風に使ってますと書いておきます。


          jQuery(function(){

               var a;

               jQuery("#clickbutton").click(function(){
                    a = "a";
               });


               jQuery("#clickbutton2").click(function(){
                    console.log(a); //変数aの中に"a"が入っている

                    if(a == "a")
                    {
                         a = "b";
                         console.log(a); //変数aの中の値が"b"になる!
                    }
               });
               
          });

私はこういう風に書いてますが、
オライリーの6版の56ページ3.10変数のスコープの所で、
グローバル変数でvarを省略しても良いけどローカルではvarを宣言してねって書いてあります。

これをやるとローカルスコープで宣言された変数の値が変わると、
グローバルスコープで宣言された変数の値も変わるためです。

どうすれば一番良いんだろう・・・と今は新しい問題に悩んでます。
それなので、優しく教えてくれる人を絶賛募集中です!

と、とにかく今日一番言いたかったのは、クリックイベントが実行された時に変わった変数は
別のイベントが実行された時に使えるよってことが言いたかったです!

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事