28

多くの場所で、次のようなスクリプトを目にします。

(function () {
    var hello = 'Hello World';
    alert(hello);
})();

関数なしで、次のように書いてみませんか。

var hello = 'Hello World';
alert(hello);
4

4 に答える 4

34

Variable Scopeを管理するために、自己実行関数を使用します。

変数のスコープは、変数が定義されているプログラムの領域です。グローバル変数にはグローバル スコープがあります。JavaScript コードのあらゆる場所で定義されています。（あなたの機能でも）。一方、関数内で宣言された変数は、関数の本体内でのみ定義されます。これらはローカル変数であり、ローカル スコープを持ちます。関数パラメーターもローカル変数としてカウントされ、関数の本体内でのみ定義されます。

var scope = "global";
function checkscope() {
    alert(scope);
}

checkscope(); // global

ご覧のとおり、関数内の変数にアクセスできますscopeが、関数の本体内では、ローカル変数が同じ名前のグローバル変数よりも優先されます。グローバル変数と同じ名前のローカル変数または関数パラメーターを宣言すると、グローバル変数が効果的に非表示になります。

var scope = "global";
function checkscope() {
    var scope = "local";
    alert(scope);
}

checkscope(); // local
alert(scope); // global

ご覧のとおり、関数内の変数はグローバル変数を上書きしません。この機能により、コードを自己実行関数内に配置して、コードがどんどん大きくなったときに他の変数が上書きされるのを防ぎます。

// thousand line of codes
// written a year ago

// now you want to add some peice of code
// and you don't know what you have done in the past
// just put the new code in the self executing function
// and don't worry about your variable names

(function () {
    var i = 'I';
    var can = 'CAN';
    var define = 'DEFINE';
    var variables = 'VARIABLES';
    var without = 'WITHOUT';
    var worries = 'WORRIES';

    var statement = [i, can, define, variables, without, worries];

    alert(statement.join(' '));
    // I CAN DEFINE VARIABLES WITHOUT WORRIES
}());
于 2013-06-12T06:06:31.987 に答える
14

IIFE (即時起動関数式) は、グローバル変数の作成を回避しますhello。

他の用途もありますが、投稿したコード例では、それが理由です。

于 2013-06-12T06:03:12.080 に答える
7

グローバル名前空間をきれいに保つこととは別に、後で使用するためにいくつかのプロパティを公開しながら、アクセス可能な関数のプライベート メソッドを確立するのにも役立ちます。

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
}());

// 'counter' is an object with properties, which in this case happen to be
// methods.

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5
于 2013-06-12T06:06:08.970 に答える
3

いくつかの理由が考えられます。

関数が新しいスコープを作成するため、最初のものはスコープを保護しています。

もう 1 つは変数をバインドできます。たとえば、

for (var i = 0; i < n; i++) {
   element.onclick = (function(i){
      return function(){
         // do something with i
     }
   })(i);
}
于 2013-06-12T06:06:39.270 に答える