在网页中，我应该在哪里声明全局JavaScript变量？

Question

在网页中，我应该在哪里声明全局JavaScript变量？

javascriptglobal-variables

17

我需要将一段初始化变量的 JavaScript 代码放在哪里，以便所有执行于页面上的代码均能访问该变量？（例如，元素的事件处理程序将需要访问此变量）。

- Tony the Pony

5个回答

15

你可以在任何函数中或在不使用 'var' 关键字的函数中进行设置。将其分配在任何其他脚本之前（很可能是页面顶部），以便脚本可以读取该值。

你还可以将其放置在包含的JS文件中，但通常将其直接放在页面上更易于使用，因为你可以轻松地查看全局值，并且服务器端代码可以为每个页面修改这些值。同时，尽量避免在正文中分配全局变量，这可能会引起混乱并且难以阅读。

<head>
    <script>
        var numberOfDucks = 1000; // Global

        function some_function() {
            // numberOfDucks is accessible here
            alert (numberOfDucks);
            //  until you mask it by defining a local variable using the 'var' keyword
            var myLocal = 0; // is a local
            anotherGlobal = 0; // is a global
        }
    </script>

    <script>
        // potentially some other script
    </script>

    <script src="even_more_script.js">
</head>

在函数中定义全局变量（隐式全局变量）并不是一个好主意，因为它会导致很多混乱。

- DarkWingDuck

4

你可以将该变量放在页面开头（如果你必须使其在全局范围内可见，则放在全局作用域中），但我建议两件事情：

1）由于您必须打开脚本块，请避免在页面主体内声明它，因为脚本块会渲染。因此，请将其放置在</head>之前。

2）避免创建一个简单的变量，而是使用命名空间，以减少标识符冲突的风险。

<script>
var YOUR_APP_NS = {};
YOUR_APP_NS.yourvar = ....
</script>

这是一种良好的实践，以避免污染全局作用域。如果您需要以这种方式使用多个公共变量，可以只编写

YOUR_APP_NS.yourvar1 = ....
YOUR_APP_NS.yourvar2 = ....
YOUR_APP_NS.yourvarN = ....

但是全局变量仍然是1

- fcalderan

1

在任何函数之外声明变量，这样它就成为了全局变量。

下面是一个全局变量的例子。第一个函数使用全局变量，但第二个函数使用了同名的局部变量，掩盖了全局变量。

var globalVar = 1;

function testFunc1 () {
    globalVar = 2; //Updates the global variable
}

function testFunc2 () {
    var globalVar = 5; // This variable masks the global and only updates within the scope of this function
    globalVar = 3;
}

此外，您提到片段必须在任何其他引用之前初始化全局变量。为此，我建议您将脚本块或对JavaScript文件的引用放置在元素中的任何其他JavaScript引用之前。如果您有其他依赖于全局变量的JavaScript文件，则可能希望确保它们在使用defer属性等待页面的其余部分加载后再加载。请参见以下内容：

<script src="dependant.js" type="text/javascript" defer="defer"></script>

另一个选项是在初始脚本加载后动态添加依赖脚本。您可以使用类似以下方式的jQuery来实现：

$(window).load( function() {
    $.getScript('dependant.js');
});

- Brian Scott

0

<head>
<script>
    var b = 0;
</script>
<script src="...">
</head>
<body>
    ...
</body>

- Floyd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meder omuraliev · Accepted Answer

不使用全局变量的唯一方法是在函数的作用域中使用var关键字。其他任何方式都会创建全局变量。

(function() {
  var local = 5;
})();

该函数可以是文字或函数定义，但必须是某种类型的函数。

全局变量示例：

1:

var global = 5;

即使使用var关键字，上述内容不在函数作用域内，因此是全局的。

2.

(function() {
   global = 5;
})();

在上面的代码中，没有使用var，因此它成为了一个隐式全局变量。

3.

function foo(){}

foo没有在另一个函数内部定义，也没有赋值给对象键，因此它是全局可访问的。

4.

(function() {
   var local = global = 5;
})();

使用var进行多个赋值时，只有第一个变量是局部变量...因此，global是一个全局变量且等于5。

5.

window.foo = 5;

在浏览器的上下文中，给变量加上 window. 前缀是一种显式定义全局变量的方式。

6.

this.x = 5;

在浏览器中，默认情况下，this 指向 DOMWindow，除非你在一个附加到非 window 对象的方法中。这与第5点相同。请注意，如果使用像 XMLHttpRequest 这样的方法，则上下文是窗口。

7.

with ( window ) { name = 'john'; }

如果你使用with语句并且没有引用已经有属性的对象，那么就会定义一个全局变量。一般最好避免使用with关键字。

结论：

个人建议将代码放入匿名函数作用域中，并仅在需要时明确声明全局变量。

(function() {

   var governor = 'Schwarzenegger',
       state = 'California';

   window.president = 'Obama';
})();

在上面的代码中，我定义了governor和state变量，并且它们是我的函数局部变量。我想明确地将president定义为全局变量。这样，我就不会困惑哪些变量是我定义为全局变量，因为我用window.前缀明确表示它们是全局变量。