2011-09-11 6 views
3

私は、次のJavaScript出くわし:このjavascriptの目的は何ですか?

<body>   
    <script type="text/javascript"> 
    (function() { 
     alert('test'); 
     })(); 
    </script> 

そして私は、関数の内部でコードを持つことの目的が何であるか興味がありましたか?それはちょうどこのように書かれている場合、これは同じことをしないだろう:多くの場合、コードで使用されるすべての変数を確保するために使用されます

<body>   
    <script type="text/javascript"> 
     alert('test'); 
    </script> 

答えて

3

通常、これはプライベートスコープを作成し、グローバルスコープを汚染しないために使用されます。しかし、この場合、メリットはありません。

例:

(function() { 

    var counter = 0; 

    $('#elem').click(function() { 
     counter += 1; 
     alert('#elem has been clicked ' + counter + ' times!'); 
    }); 

}()); 

ここカウンタ変数を囲む関数の内部コードにプライベートです。囲み関数で定義されている他の関数は、これらの変数にアクセスできます(が変数を閉じます;クロージャです)。

これは通常、はい、この場合はImmediately Invoked Function Expression

+0

+1です)。非常に有益。 – MTLPhil

2

だけこのコードのスニペットから値を取る - ローカルスコープ。スニペット外で定義された変数は無視されます。

var a = 10; 
(function() { 
    alert(a); // undefined 
    var a = 5; 
    alert(a); // 5 
    })(); 

そのほかの主な用途は、コードが1つのJavascriptライブラリページ上で使用されている複数のライブラリー(例えばプロトタイプ、MooToolsは)があっても(例えばjQueryの)で動作します確保することです。あなたが関数にjQueryオブジェクトを渡すことによって、...のような

(function($) { 
    alert('test'); 
    // You can now use the jQuery $ in here 
    // And not worry about the Prototype $ being used instead 
    })(jQuery); 

を何かをしたい、それが優先します$のローカルスコープの変数名は、取得グローバルスコープの持つプロトタイプ$(利用可能な完全に異なる方法)。

+0

これはほとんどのjQueryプラグインで使用されていますが、これは**このパターンの主な使用ではありません**。 – arnaud576875

+0

これを修正するために更新されました。私の悪い: – Joe

+1

"これらは、スニペットの外で定義された変数を無視します。"間違っている。 2番目の 'var a = 5'を削除してみてください。これは、JSでは、すべてのvar宣言が関数の最初に暗黙的に移動されるという事実の副作用です(それに似たコードに対してJSLintが警告を出す理由は – xanatos

1

と呼ばれています。しかし。

JavaScriptは実際にはグローバルと関数の2つのスコープしか持たないので、コードを関数の中に入れてすぐに実行することは、変数を分離する1つの方法です。 alertの前に変数が定義されていたとすると、別の関数内にすべてを保持すると新しいスコープが作成され、同じ名前のグローバル変数が破棄されなくなります。

1

この場合はあまり効果がありません。 alert("test")は何が実行されても再利用されません。

さらに一般的には、JavaScript(多くの場合、ファイル全体)を匿名関数にラップすると、変数と関数がグローバルスコープを汚染するのを防ぐことができます。これは、他のコードとの競合を避けるのに役立ちます。ここで

More info here

0

アラートと機能のオプションを持っている理由私はあなたを示しています。人々は自分のボタンをクリックすると、一度しかクリックできないので、警告を追加しました。この機能は、私が作成したものです(投票を追加するボタン&は投票数を表示します)。警告は単なる追加です。

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>Vote!</title> 


<script type="text/javascript"> 

function countClicks() { 
var x = 0; 


x += 1 
document.getElementById("counting").innerHTML = x; 

var clickLimit = 1; //Max number of clicks 
if(x>=clickLimit) { 

alert('you can only click once') 
      } 
else 
{ 
    ClickCount++; 
    return true; 
} 
} 

</script> 

</head> 
<body> 

<div style="margin-left:100px;"> 
<input type="button" value="VOTE" name="clickOnce" onclick="return countClicks();" /> 
<div id="counting"></div> 
</body> 

</html> 
関連する問題