如何在.js文件中声明全局变量


86

我需要所有.js文件中都需要的一些全局变量。

例如,考虑以下4个文件:

  1. global.js
  2. js1.js
  3. js2.js
  4. js3.js

考虑到我将上述所有4个文件都加载到HTML文档中,有没有一种方法可以在其中声明3个全局变量global.js并在其他3个.js文件中的任何一个中访问它们?

有人可以告诉我这是否可行吗?或者可以解决这个问题吗?

Answers:


95

只需在函数范围之外的global.js中定义变量:

// global.js
var global1 = "I'm a global!";
var global2 = "So am I!";

// other js-file
function testGlobal () {
    alert(global1);
}

为确保此方法有效,您必须先包含/链接到global.js,然后再尝试访问该文件中定义的任何变量:

<html>
    <head>
        <!-- Include global.js first -->
        <script src="/YOUR_PATH/global.js" type="text/javascript"></script>
        <!-- Now we can reference variables, objects, functions etc. 
             defined in global.js -->
        <script src="/YOUR_PATH/otherJsFile.js" type="text/javascript"></script>
    </head>
    [...]
</html>

当然,如果您不希望js文件的加载中断初始页面加载,则可以在结束<body> -tag之前的脚本标签中进行链接。


4
虽然此答案是正确的,但我建议您使用Google Javascript变量作用域,以更好地理解并可能避免以这种确切方式进行操作。
aleemb

1
同意 我总是尝试将所有函数和变量的作用域限定在一个公共的“命名空间”中,以避免混乱和冲突。通常,我将其命名为项目或公司的缩写。
PatrikAkerstrand,2009年

否决该答案,其他人都喜欢,因为它假定将在全局范围内创建全局变量,并且还要求在所有其他提及之前,变量的第一次提及必须在全局范围内。
安德鲁

1
@安德鲁这个答案是八年前写的。出于所有意图和目的,当时都是正确的。如果您想实际做出贡献,则可能要建议编辑?
PatrikAkerstrand'5

@PatrikAkerstrand约会实际上没有任何区别。使用全局对象的其他答案就足够了;我解释了为什么不是这样。
安德鲁

89

推荐的方法是:

window.greeting = "Hello World!"

然后,您可以在任何函数中访问它:

function foo() {

   alert(greeting); // Hello World!
   alert(window["greeting"]); // Hello World!
   alert(window.greeting); // Hello World! (recommended)

}

首选此方法有两个原因。

  1. 目的是明确的。var关键字的使用很容易导致声明全局变量vars,而全局变量原本是本地变量,反之亦然。对于许多Javascript开发人员来说,这种变量作用域是一个混淆点。因此,作为一般规则,我确保所有变量声明都以关键字var或prefix开头window

  2. 您还可以标准化语法以这种方式读取变量,这意味着局部作用域var不会破坏全局变量,var反之亦然。例如,这里发生的事情是模棱两可的:

 

 greeting = "Aloha";

 function foo() {
     greeting = "Hello"; // overrides global!
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // does it alert "Hello" or "Howdy" ?

但是,这更加简洁,而且不易出错(您实际上不需要记住所有变量作用域规则):

 function foo() {
     window.greeting = "Hello";
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // alerts "Howdy"

将变量附加到窗口应该可以在所有浏览器上使用(也是我采用的方法+1!)。
丹迪

1
@Dan,如果您声明“ var testvar ='hello';” 在函数外部,它会自动添加到窗口对象,您可以使用“ window.testvar”进行访问。
zkent 2013年

1
@zkent,是的,但是使用Window对象仍然更好,因为您以后可能希望将您的代码转换成类似咖啡的东西。
Nami WANG

使用Window而不是Document前缀更好吗?
安德鲁

7

你试过了吗?

如果您这样做:

var HI = 'Hello World';

在中global.js。然后执行:

alert(HI);

js1.js它会很好。您只需要global.js在HTML文档的其余部分之前添加。

唯一的问题是您必须在窗口范围内(而不是在任何函数内)声明它。

您可以修改var零件并以这种方式创建它们,但这不是一个好习惯。


7

如上所述,在脚本文件中使用最高级作用域存在一些问题。这是另一个问题:在某些运行时环境中,脚本文件可能是从不是全局上下文的上下文中运行的。

已经提出window直接将全局分配给。但是,这也与运行时有关,并且不能在Node等中使用。这表明可移植全局变量管理需要仔细考虑和付出额外的努力。也许他们会在将来的ECMS版本中修复它!

就目前而言,我建议使用类似的方法来支持所有运行时环境的适当全局管理:

/**
 * Exports the given object into the global context.
 */
var exportGlobal = function(name, object) {
    if (typeof(global) !== "undefined")  {
        // Node.js
        global[name] = object;
    }
    else if (typeof(window) !== "undefined") {
        // JS with GUI (usually browser)
        window[name] = object;
    }
    else {
        throw new Error("Unkown run-time environment. Currently only browsers and Node.js are supported.");
    }
};


// export exportGlobal itself
exportGlobal("exportGlobal", exportGlobal);

// create a new global namespace
exportGlobal("someothernamespace", {});

键入的内容更多,但可以使全局变量管理永不过时。

免责声明:在查看早期版本的stacktrace.js时,我想到了部分想法。

我认为,还可以使用Webpack或其他工具来获得对运行时环境的更可靠和可靠的检测。


2
GLOBAL现在已弃用,global应改为使用。
托马斯(Thomas)

2

是的,您可以访问它们。您应该在“公共空间”(所有函数之外)中将它们声明为:

var globalvar1 = 'value';

您以后可以在其他文件中访问它们。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.