JavaScriptでグローバル変数を宣言する方法は?


回答:


215

プロダクションコードでグローバル変数を生成する必要がある場合(回避する必要があります)、常に明示的に宣言します。

window.globalVar = "This is global!";

省略してvar(同じ名前のローカル変数がないと仮定して)グローバル変数を定義することは可能ですが、これを行うと暗黙のグローバルが生成されます


windowブラウザでのみ使用できます。回答を編集して、すべての環境で機能するようにできますか?JavaScriptでグローバルオブジェクトを取得する方法を
のMichałPerłakowski

52

これがこの変数を使用する唯一のアプリケーションである場合、Felixのアプローチは優れています。ただし、jQueryプラグインを作成している場合は、jnameオブジェクトで必要な「namespacing」(引用の詳細は後で...)変数と関数を検討してください。たとえば、現在miniMenuと呼んでいるjQueryポップアップメニューに取り組んでいます。したがって、miniMenujQueryで「名前空間」を定義し、そこにすべてを配置します。

JavaScriptの名前空間について話すときに引用符を使用するのは、それらが通常の意味での名前空間ではないためです。代わりに、JavaScriptオブジェクトを使用して、すべての関数と変数をこのオブジェクトのプロパティとして配置します。

また、便宜上、通常はプラグインの名前空間をiプラグイン内でのみ使用する必要があるものの名前空間でサブスペース化し、プラグインのユーザーから非表示にします。

これがどのように機能するかです:

// An object to define utility functions and global variables on:
$.miniMenu = new Object(); 
// An object to define internal stuff for the plugin:
$.miniMenu.i = new Object();

これで、何かをグローバルに保存する必要があるとき、$.miniMenu.i.globalVar = 3または$.miniMenu.i.parseSomeStuff = function(...) {...}いつでもそれを行うことができますが、それでもグローバルな名前空間には入れません。


そのトーマスのおかげで、上記のサイトでFelixのアプローチは問題なく機能しますが、いくつかのプラグインを使用している別のサイトにも取り組んでいます。あなたの助けを乾杯。
ダンサー、

これは完璧に機能します!@Tomasが言うように、独自のカスタム関数または変数用の独自のクラス/ホルダーを作成してください。+1
ピエール

ありがとうトーマス!不要になった場合は、親オブジェクトを削除します(例:) delete $.miniMenu。大丈夫ですか?
Kunj

1
@KunJ:もちろん、他のものと同様に、今後使用されないことが保証できる場合は、削除しても安全です。あなたがいないので、しかし、JavaScriptはゴミは、あなたのためにそれを収集する必要がありdelete $.miniMenu
Tomas Aschan

20

編集 問題はJavaScriptに関するものであり、答えはjQueryに関するものですが、これは誤りです。これは、jQueryが広まった時代からの古い答えです。

代わりに、JavaScriptのスコープクロージャーを理解することをお勧めします

古くて悪い答え: jQueryでは、宣言がどこにあってもこれを実行できます。

$my_global_var = 'my value';

そして、どこでも利用できるようになります。次のように、画像がさまざまな場所に広がっている場合に、画像ギャラリーをすばやく作成するために使用します。

$gallery = $('img');
$current = 0;

$gallery.each(function(i,v){
    // preload images
    (new Image()).src = v;
});
$('div').eq(0).append('<a style="display:inline-block" class="prev">prev</a> <div id="gallery"></div> <a style="display:inline-block" class="next">next</a>');
$('.next').click(function(){
    $current = ( $current == $gallery.length - 1 ) ? 0 : $current + 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});
$('.prev').click(function(){
    $current = ( $current == 0 ) ? $gallery.length - 1 : $current - 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});

ヒント:このコード全体をこのページのコンソールで実行してください;-)


3
$ galleryと$ currentは通常のグローバル変数ではありませんか?それらは 'var'を省略してグローバル変数として定義しているので機能しますが、それらの前のドル記号はそれらを 'jQuery変数'にしません...文字からアンダースコアまたはその他の記号を付けるのと同じです... jQueryオブジェクト($)を使用してプロパティを追加すると、jQuery変数になります:$ .myGlobalVariable = 'my value' ...
Andres Elizondo

おそらくあなたは正しいですが、注目に値するのは、$ myVar構文を使用すると2つのアドバンテージが得られることです。1)変数は($以外に)特別な宣言なしでグローバルです。2)コード内でグローバル変数を非常に簡単に追跡できます。ディスカッションは
自由

誤解した答え。Andresに同意します。これはjQuery変数ではありません。$current = 0;関数の最初で定義しないと、後の関数は機能しません。
harrrrrrry

15

次に、残りの関数がアクセスできるグローバル変数の基本的な例を示します。ここにあなたのためのライブの例があります:http : //jsfiddle.net/fxCE9/

var myVariable = 'Hello';
alert('value: ' + myVariable);
myFunction1();
alert('value: ' + myVariable);
myFunction2();
alert('value: ' + myVariable);


function myFunction1() {
    myVariable = 'Hello 1';
}

function myFunction2() {
    myVariable = 'Hello 2';
}

jquery ready()関数内でこれを行う場合は、変数が他の関数とともにready()関数内にあることを確認してください。


jQueryでグローバル変数がどのように機能するかについての最良の答えは、まだです。
クリントングリーン

1
私は重大な掘り出していることを知っていますが、これは明示的なグローバル変数でさえありません。これは、非常に小さなスクリプトのクロージャにスコープされていない共有パブリック変数とより調和しています。これらは2つのまったく異なるメソッド/使用法であり、いくつかの異なるスクリプトの途中にあるスクリプトで明示的なグローバルを宣言すると、大きな問題が発生します。私のチームのフロントエンドが、DOMに呼び出される10番目のスクリプトであるスクリプトの先頭でグローバル変数を宣言することしか想像できません。
ブライアンエリス

4

関数の外で変数を宣言する

function dosomething(){
  var i = 0; // can only be used inside function
}

var i = '';
function dosomething(){
  i = 0; // can be used inside and outside the function
}

3

最適な方法はを使用することですclosures。これは、windowオブジェクトがプロパティで非常に乱雑になるためです。

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="init.js"></script>
    <script type="text/javascript">
      MYLIBRARY.init(["firstValue", 2, "thirdValue"]);
    </script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello !</h1>
  </body>    
</html>

init.jsこの回答に基づく)

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function(i) {
            return _args[i];
        }
    };
}());

script.js

// Here you can use the values defined in the html as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);

alert(a);

これがplnkrです。それが役に立てば幸い!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.