两个独立的JavaScript脚本可以共享变量吗?

Can two separate JavaScript scripts share variables?

本文关键字：脚本 共享变量 JavaScript 两个 独立      更新时间：2023-09-26

如果我有两个单独的脚本在HTML页面与JavaScript之间的变量共享整个页面?还是只在它们自己的声明中?

的例子:

<script> var title = "Hello World!"; </script>
// random HTML/PHP
<script> document.write(title); </script>

会写"Hello World!"吗?这似乎是一个糟糕的编码惯例，否则我怎么能以正确的形式实现这样的东西呢?

变量title在您的示例中被声明为全局变量，因此它将对加载到同一页面的任何和所有脚本可用。更重要的是，如果在同一页面上已经有一个名为title的全局变量，那么当您为其赋值"Hello World!"时，它的值将被覆盖。

避免这类问题的通常做法是只声明一个全局变量，然后将所有其他变量放入其中。例如:
var bobbyS_vars = {
    title: "Hello World!";
};

为这个唯一的全局变量分配一个其他人不可能选择的名称，比如你的名字或雇主的名字，或者最好是一个属于你或你雇主的域名。

处理此问题的另一种更常见的方法是利用JavaScript在函数中处理变量作用域的方式。例如，创建一个匿名函数，在该函数中声明所有代码，然后在声明的末尾通过在声明的末尾放置()来调用该函数。例如:
(function() {
    var title = "Hello World!";
    document.write(title);
})();
// title is not in scope here, so it is undefined,
// unless it were declared elsewhere.

如果希望共享一些变量，而不是其他变量，请让匿名函数使用以下方法的组合:

var bobbyS_vars = {
    title: "Hello World!";
};
(function() {
    var employeeId = "E 298";
    var count = 7;
    document.write("<p>" + bobbyS_vars.title + "</p>");
    document.write("<p>" + employeeId + "</p>");
})();
// At this point, bobbyS_vars.title is in scope and still has the 
// value "Hello World!". Variables employeeId and count are not
// in scope and effectively private to the code above.

最后一点。代码声明的所有函数都是有效的全局变量。因此，如果您创建了一个名为printTitle的函数，则它1)可用于页面上的所有其他代码，2)可以覆盖或被同一页面上的另一个名为printTitle的函数覆盖。你可以像保护其他变量一样保护和/或公开你的函数:

var bobbyS_vars = { };
(function() {
    // Private functions
    var function = addOne(i) {
        return i + 1;
    };
    // Public vars
    bobbyS_vars.title: "Hello World!";
    // Public functions
    bobbyS_vars.printTitle = function() {
        document.write("<p>" + bobbyS_vars.title + "</p>");
        document.write("<p>" + addOne(41) + "</p>");
    };
})();
// At this point, function addOne is not directly accessible,
// but printTitle is.
bobbyS_vars.printTitle();

注意，虽然函数addOne实际上是闭包中的私有函数，但它仍然可以通过printTitle函数间接访问，因为addOne和printTitle都在同一个作用域中。

title在Global作用域中，在浏览器中运行JavaScript的情况下，是window对象。当您在任何限制其作用域的函数之外说var title = "Hello World!"时，它与说window.title = "Hello World!"是一样的。您的代码相当于:

<script>
    window.title = "Hello World!";
</script> 
<!-- random HTML/PHP -->
<script>
    document.write(title);
    // or document.write(window.title) works just as well
</script>

它们都将按照作用域规则等被"共享"。单独的文件对这个没有影响，除了文件包含的顺序。

编辑:同样的规则也适用于内联脚本。

并详细说明例外情况:

如果我有一个文件Foo，我声明了以下内容:

var fooVar = barVar;

然后我有文件栏，我声明如下:

var barVar = 'bar';

我将它们按以下顺序包含:

<script type="javascript/text" src="foo.js"></script>
<script type="javascript/text" src="bar.js"></script>

您将得到一个解释错误，因为barVar的使用在其声明之前。

在本例中，title将是一个全局变量。您需要将变量封装在作用域中。有各种各样的方法可以做到这一点。我的首选是一个自动执行的匿名函数，可以这样做:

    (function() {
       var title = "Hello world!";
       alert(title); // would pop up "Hello World!" since title is in scope
    });
    alert(title); // title doesn't exist, because it's outside the scope

window保存所有变量。所有脚本都在母window对象中。所有的变量都在一个空间里。但是，它们可以被本地化为函数等。

相关文章：