✔︎Pickup
【JavaScript】即時関数を再利用する方法

結論

即時関数を再利用するはありません。

なので、代替策を考える必要があります。

即時関数とは

即時関数は定義すると即時に実行される関数です。

定義後に実行され再利用されない場合や、グローバルスコープ名の汚染回避などが可能となります。

こめつぶ
定義すると即時に実行されるってどうゆう意味でしょうか?

通常関数を実行するためには、定義された関数をプログラムの中で呼び出す必要があります。

しかし、即時関数はJavaScriptが読み込まれた時点で実行されます。

イメージとしては初回起動時に関数が実行されるものと考えて良いでしょう。

つまり、基本的に一回切りしか関数は実行されず、それ以降は意味のない記述になるということになります。

即時関数の書き方

初めてJavaScriptを学習したときに、即時関数の記述の方法がわからなかったのでここにまとめておきます。

どれも即時関数としての動きをします。

//1つ目
(function(){
  //処理を行う
}());

//2つ目
(function () {
  //処理を行う
})();

//3つ目
+function(){
  //処理を行う
}();

//4つ目
-function(){
  //処理を行う
}();

//5つ目
!function(){
  //処理を行う
}();

//6つ目
void function(){
  //処理を行う
}();

//7つ目
typeof function(){
  //処理を行う
}();

代替策

先に述べたように即時関数は初回実行時の一回きりしか実行されないため、処理を再利用することはできません。

こめつぶ
即時関数で書かれた処理を再利用するためにはどのようにすれば良いでしょうか

代替策】即時関数内の処理を別の関数として定義を行う

即時関数内の処理を関数化しておくことで、関数化された処理を再度利用することが可能になります。

サンプルコードを記述してみます。

サンプルコード

//即時関数 初回起動時に実行される
!function(){
  //再利用したい処理を関数化して実行する
  test();
}();

//即時関数と同じ処理を実行する。
function next_func(){
  test();
}

function test(){
  alert("処理を行う");
}

コードの解説

即時関数なので、定義された時点でtest()という関数が処理されます。

!function(){
  //再利用したい処理を関数化して実行する
  test();
}();

即時関数と同じ処理を行う通常の関数です。next_func()と記述して使用することで、即時関数と同じ処理が行われます。

//即時関数と同じ処理を実行する。
function next_func(){
  test();
}

アラート通知が画面に表示されます。

function test(){
  alert("処理を行う");
}

まとめ

JavaScriptを学習して、わからないことや難しいことを自分の備忘録として記述しておこうと思います。

どこかの誰かの参考になれば嬉しいです。

JavaScriptで多次元の連想配列を作成するサンプルコードの記事はコチラ

PHPで取得したデータをJavaScriptに渡す方法を記載した記事はコチラ

ブログ村リンク
ポチッと押してね!フォローもしてね!

ブログランキング・にほんブログ村へ
にほんブログ村
おすすめの記事