web-dev-qa-db-ja.com

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

JavaScriptでグローバル変数を宣言する方法を教えてください。

javascriptglobal-variables
134
Dancer

プロダクションコードでグローバル変数を生成しなければならない場合（これは避けるべきです）常に宣言する明示的に：

window.globalVar = "This is global!";

（同じ名前のローカル変数がないと仮定して）varを省略するだけでグローバル変数を定義することは可能ですが、そうすることで暗黙のグローバルが生成されます。これは悪いことであり、厳密モードではエラーが発生します。

213
Felix Kling

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

私が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(...) {...}を実行することができますが、それでもグローバルな名前空間から除外します。

52
Tomas Aschan

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();
});

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

21
aesede

これは、残りの関数がアクセスできるグローバル変数の基本的な例です。これはあなたのための実例です： 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（）関数の中にあることを確認してください。

15
Paul Dragoonis

関数外で変数を宣言する

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
}
4
user3632465

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 です。お役に立てば幸いです。

3
robe007