如何在JavaScript中声明全局变量

145

我如何在JavaScript中声明全局变量?

6个回答

227

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

window.globalVar = "This is global!";

在JavaScript中,如果仅仅省略var关键字(假设没有同名的局部变量),也可以定义全局变量。但是这样做会创建一个隐式全局变量,这种方式是不好的,而且在严格模式下还会产生错误。


1
window 只在浏览器中可用。你能否编辑你的答案,使其在所有环境中都能工作?请参阅 如何在 JavaScript 中获取全局对象? - Michał Perłakowski
在Node.js中,global对象与浏览器中的window对象相同。 - GiantBooley

52
如果这是你唯一使用此变量的应用程序,则Felix的方法非常好。但是,如果你正在编写一个jQuery插件,请考虑在jQuery对象下“命名空间”(稍后详细说明...)所需的变量和函数。例如,我目前正在开发一个名为miniMenu的jQuery弹出菜单,因此我已经在jQuery下定义了一个名为“命名空间”miniMenu,并将所有内容放置在那里。
我称之为JavaScript命名空间的原因是,它们不是正常意义上的命名空间。相反,我只是使用JavaScript对象,并将所有函数和变量作为该对象的属性放置其中。同时,为了方便起见,我通常会用命名空间来分隔插件命名空间,以处理插件内部专用的内容,从而将其隐藏在插件的用户界面之外。
以下是具体的实现方法:
// 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(...) {...}即可在需要时全局保存一些内容,而且仍然不会污染全局命名空间。


谢谢您的帮助,Tomas。在我提到的网站上,Felix的方法很好用,但我还在另一个使用多个插件的网站上工作,如果我能让您的方法奏效,那就太理想了。感谢您的帮助。 - Dancer
这个非常完美!只要像@Tomas所说的那样,为您自己的自定义函数或变量制作自己的类/持有者即可。+1 - Pierre
谢谢Tomas!如果不再需要,删除父对象(例如:delete $.miniMenu)。可以吗? - Kunj
1
@KunJ:当然,和任何东西一样:如果你能保证它不再被使用,那么删除它是安全的。然而,JavaScript会自动进行垃圾回收,所以你不需要手动删除$.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对象($)并向其添加属性如:$.myGlobalVariable ='my value',那么它们将成为jQuery变量。 - Andres Elizondo
你可能是对的,但值得注意的是,使用 $myVar 语法可以带来两个优点:1)变量是全局的,无需任何特殊声明(除了 $);2)你可以在代码中非常容易地跟踪你的全局变量。虽然这方面还有讨论空间... - aesede
一个误导性的答案。同意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中全局变量如何工作的最佳答案。 - Clinton Green
1
我知道我在挖坟,但这甚至不是一个显式的全局变量。这更符合共享公共变量的调整,而不是针对极小脚本未作用域限制的闭包。它们是两种完全不同的方法/用法,如果您在多个不同脚本中间声明显式全局变量的脚本中使用此方法,那么这将给您带来重大麻烦。我只能想象我的团队中的前端在调用DOM中的第10个脚本时在脚本顶部声明全局变量。 - Brian Ellis

4

最好的方法是使用 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 (based on this answer)

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 content as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);

alert(a);

这是plnkr,希望能对您有所帮助!

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
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接