読者です 読者をやめる 読者になる 読者になる

破棄されたブログ

このブログは破棄されました。

JavaScript の即時実行関数において引数で変数を渡す意味とは

最近 JavaScript のコード書いたり読んだりしててよくわからんかったこと。
即時実行関数の引数の意味。書いてみたコードの通り、スコープチェーンからクロージャ外の変数を参照できるから、直接参照した場合も引数で渡した場合も同じ値を示す。

var hoge = "hoge";

(function(){
  // スコープチェーンからクロージャの外の hoge を参照できる
  var fuga = hoge;
  console.log(fuga); // hoge
})();

(function(fuga){
  console.log(fuga); // hoge
})(hoge);

オブジェクトを渡した場合も同様に同じ参照先を示す。

var obj = {};

(function(_obj){
  console.log(_obj === obj);
})(obj);

あと、関数を渡した場合。この場合も実行コンテキストが同じく window になる*1ので挙動はかわらない。

var fn = function() {
  console.log(this);
};

(function(){
  fn(); // window
})();

(function(_fn){
  _fn(); // window
})(fn);

考えてみた理由

引数で渡したほうが疎結合になる

グローバルに直接依存するよりは、引数として注入したほうがコードの分離が容易になるし、テスタブル。

ミスによるグローバル汚染の防止

クロージャ内でうっかり var つけ忘れてグローバル汚染をするのを防ぐ。

省略記法

引数で渡したほうが綺麗に書ける。


だれかおせーて。

*1:実行環境がブラウザの場合

広告を非表示にする