如何在JavaScript中声明全局变量？

Question

如何在JavaScript中声明全局变量？

Answer 1

如果必须在生产代码中生成全局变量(应该避免),请始终明确声明它们:

window.globalVar = "This is global!";

虽然可以通过省略var(假设没有相同名称的局部变量)来定义全局变量,但这样做会产生一个隐式全局,这是一件坏事,并且会在严格模式下生成错误.

Answer 2

如果这是您将要使用此变量的唯一应用程序,那么Felix的方法非常出色.但是,如果您正在编写jQuery插件,请考虑jQuery对象下所需的"命名空间"(稍后引用的详细信息......)变量和函数.例如,我正在研究一个名为miniMenu的jQuery弹出菜单.因此,我miniMenu在jQuery下定义了一个"命名空间" ,并将所有内容放在那里.

我在谈论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(...) {...}每当我需要全局保存时,我仍然将它保留在全局命名空间之外.

Answer 3

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

提示:在此页面的控制台中运行此完整代码;-)

Answer 4

以下是其余功能可以访问的全局变量的基本示例.以下是您的实例: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()函数一起位于其他函数内.