Supertrue walfo

JavaScript, 即時関数でthisを指定して引数も受け取る

即時関数の中の this が window を参照しているのはなにか落ち着かない。
this を明示して、さらに密室でローカルな環境を作りたい。

即時関数

(function() {
  // ローカル環境
})();

即時関数の記述でもっとも一般的な書き方はこのタイプなのかなと思います。

これでも機能的に特に不自由はないのですが、使い慣れてきて冷静に考えてみると this の扱いがよくないと思えてくるようになりました。

ちなみに、このときの関数内部の thiswindow となりますが。 外部の影響を受けず安全に書くことが目的ならば、this が直接外部を参照しているのはどこか落ち着かない。

解決法

というわけで、this をローカルなコンテキストとして書きたいところ。 『JavaScriptで学ぶ関数型プログラミング』 の著者のライブラリがよりよいヒントをくれました。

(function() {

}).call(this);

端的に言えば、即時関数を call 呼び出しして明示的に this を指定するということ。なるほど、目から鱗でした。

まとめ

ウェブページ上でのことを考えると、window document 場合によっては jQuery などは、引数から受け取っておきたいところです。

(function($, w, d, undefined) {
  console.log(this, $, w, d);
}).call({}, jQuery, window, document);

これまでの習慣とcall 呼び出しを合わせると、こんな感じで落ち着きましたよと。

リンク

おわり

2015年6月15日 1:42
2015年6月15日 2:19 編集済み