2011-01-07 15 views
15

可能性の重複:
What does (function($) {})(jQuery); mean?JavaScript/jQueryでは、カッコ内のコードブロックは何を意味していますか?

私は、構文の次の並べ替えでのjQueryコードをたくさん見てきましたが、私は実際にそれが何を意味するのか理解していません。コード構成に関する質問ではthis answerthis answerになります。どちらも名前空間について話しているので、私はそれが達成していることを推測しています。

var foo = (function() { 
    var someVar; 

    function someFunc() { 
     return true; 
    } 
})(); 

これは名前空間用ですか。どのように動作しますか?時には名前(名前空間?)が括弧の最終セットにあることもあります。両者の違いは何ですか?

+1

http://stackoverflow.com/questions/4531110/jquerys-function-jquery-syntax/4531124#4531124 –

+1

これは正確な複製ではありません。具体的なjQueryのケースではなく、より一般的なケースです。それはこれの類推である。 – Orbling

+1

@Orblingええ、両方の質問の回答はjquery固有のものではありません。 –

答えて

14

関数をラップする()は、匿名関数宣言を関数式に変換します。関数式は、式の後に続く()ですぐに呼び出すことができます。

この場合、var foo =はそれを式に変換するので、外側の()は実際には必要ありません。また、fooの値は、undefinedになります。これは、関数呼び出しが何も返さないためです。

新しい変数スコープを作成するために使用することができます。これは、関数がjavascriptでこれを実現する唯一の方法であるためです。 (JavaScriptにはブロックスコープはありません)

したがって、someVar変数は外部スコープからアクセスできません。制御された方法でアクセス可能にすることが望ましい場合があります。これを行うには、someVarを参照するスコープから関数を渡すことができます。関数の呼び出しが終了すると、その実行コンテキストはそのまま残り、渡された関数が提供する方法であれば、someVarが利用可能になります。

これはclosureの作成と呼ばれます。

呼び出しに値を渡して、それをsomeVarに割り当てたとします。 foo変数への呼び出しから関数returnを呼び出すことができます。その関数が参照someVarを返した場合、その関数を使用して値を取得できます。

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function() { 
     alert(someVar); 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

あなたが見ることができるように、今fooで参照される関数は、まだsomeVarにアクセスすることができます。

fooに返された関数が引数を受け入れるように変更したとします。この引数は、myVarの値を更新します。

var foo = (function (str) { 
    var someVar = str; 
/* 
    function someFunc() { 
     return true; 
    } 
*/ 
    return function(n) { 
     if(n) { 
      someVar = n; 
     } else { 
      alert(someVar); 
     } 
    }; 
})('somevalue'); 

foo(); // alerts 'somevalue' 

foo('newvalue'); // give it a new value 

foo(); // alerts 'newvalue' 

今、あなたはその値を変更し、それが以前に設定した新しい値を参照することができますようfoo内の関数は本当に、その変数にアクセスしないこと、見ることができます。

7

括弧は、匿名関数の後ろにパラメータを追加して直接呼び出すことができる変数にするために、匿名関数を囲みます。

(function(param) { 
    // do stuff 
})(param); 

最後のビットは名前空間ではなく、単なるパラメータです。これは何が行うことは無名関数の範囲内で$変数にjQueryオブジェクトを作り、関数にjQueryオブジェクトを渡すことである

(function($) { 
    $('.something').addClass('.other'); 
})(jQuery); 

:あなたは、おそらくとしてjQueryのために使用され、これを見てきました。人々は簡略化して$を使用したがっているが、他のライブラリと競合する可能性がある。この方法では、完全修飾のjQueryオブジェクトを渡して、その関数のスコープ内の変数$を上書きしてショートカットを使用することで、競合の可能性を排除します。

関連する問題