AngularJS?JavaScript?のコード

Question

以下の様に返り値が二つ続いているんですけど、
意味が理解出来ず、ご説明や参考サイトをご紹介頂ければ幸いです。
※return に無名関数とthisがかっこ続きで書いていて??になってます。

  $scope.showLoadingInvisible = (function(_this) {
    return function() {
      return $.blockUI({
        message: '',
        overlayCSS: {
          textAlign: 'center',
          backgroundColor: '#fff',
          opacity: 0.0,
          cursor: 'wait',
          zIndex: 2000
        },
        verticalAlign: 'top'
      });
    };
  })(this);

Answer 1

外側から順を追って考えていきましょう。

(function(_this) {
  })(this)

これは「即時関数」といいます。もっと分解しましょう。やっていることはこれと同じです。これならわかりますか？

var f = function(_this) { // 無名関数をfに代入
  console.log(_this);
};
f(this); // 無名関数fの引数にthisを渡す

ではこの一番外側の即時関数をAとしましょう。次にこのAが何を返すかを見てみましょう。

return function() {
};

またしても無名関数を返します。これをBとしましょう。外側の即時関数は戻り値として無名関数を返すようです。では更に内側を見て見ましょう。

return $.blockUI({
  message: '',
  overlayCSS: {
    textAlign: 'center',
    backgroundColor: '#fff',
    opacity: 0.0,
    cursor: 'wait',
    zIndex: 2000
  },
  verticalAlign: 'top'
});

私はAngularJSに詳しくないのですが、blockUIというプラグインのインスタンスを返しているようですね。これをCとしましょう。

つまりこの処理が何をしているかをまとめると…

• $scope.showLoadingInvisibleが欲しいのは引数無しの無名関数Bで、その無名関数を実行するとCのようなプラグインのインスタンスが返ってくることを望んでいる
• Aでthisを_thisという一時変数として受け取っておくことで、BやCで_thisを使って外側のthisインスタンスにアクセスが可能…だがこのコードでは_thisを使っていないのでAで囲む意味はない

Comments

[color]

ありがとう御座います。一番わかりやすかったのでベストアンサーに選ばせて頂きました。

大変ありがとう御座いました。

Answer 2

上級者が使うthisの保存テクです。
（今回のコードでは_thisを使ってないので無意味ですが）

var obj = {
  item: 'リンゴ',
  look: function () {return this.item}
};

console.log(obj.look());
// リンゴ <- 当然

var look = obj.look; // 一回保存しておこうっと
console.log(look());
// undefined <- あれれ、取れなくなったぞ？

質問文のテクを使ってみましょう

var obj = {
  item: 'リンゴ',
  look: (function(_this){return function(){return _this.item}})(obj)
};

console.log(obj.look());
// リンゴ

var look = obj.look; // 一回保存しておこうっと
console.log(look());
// リンゴ

今回は同じスコープにあるobj.itemを参照したかったので、
少し事情が違いますがobjをバインドさせておきました。

このようにJavaScriptは関数の戻り値として関数を返せます。
その時に外の関数で利用した引数を保持させておいて、内部の関数で利用することが可能です。

Answer 3

JavaScriptは変数に関数を格納することができるという特徴があり、この特性により、CやJAVAのプログラマはまず確実に読めないコードに出くわします。
これもそのパターンです。慣れれば読み解けますがかなりしんどいですね。

以下のように整形すると少し読み易くなると思います。返り値や引数に関数が設定されていることがポイントです。

var func1 = function(_this) {
      return func2;
};

var func2 = function() {
      return func3();
};

var func3 =function(){
  return $.blockUI({
        message: '',
        overlayCSS: {
          textAlign: 'center',
          backgroundColor: '#fff',
          opacity: 0.0,
          cursor: 'wait',
          zIndex: 2000
        },
        verticalAlign: 'top'
      });
};

$scope.showLoadingInvisible = (func1(_this))(this);

上記コードで説明するとまず$scope.showLoadingInvisibleはfunc1を実行します。func1はfunc2を返却しますが、返却された際はまだ実行されません。

恐らく$scope.showLoadingInvisibleを実行した側でfunc2を受け取って、任意のタイミングで実行するのでしょう。
func2を実行すると、$.blockUIが実行され、結果が取得できます。

私自身も、完全に読み解けているか自信が有りません。
もし記載に誤りなどございましたらご指摘下さい。