JavaScript 中的全局变量

Question

在 JavaScript 中，在任何函数或块之外定义的任何变量都是 全局范围 并且是任何函数都可以访问的全局变量。

const answer = 42;

function fn1() {
  console.log(answer); // Prints "42"
}

function fn2() {
  console.log(answer); // Prints "42"
}

如果您在浏览器中导入未编译的 JavaScript，使用 <script> 标签，全局变量在不同之间共享 <script> 标签。 换句话说，不同 <script> 标签共享相同的全局范围。

<script type="text/javascript">
  const answer = 42;
</script>
<script type="text/javascript">
  console.log(answer); // 42
</script>

在 Node.js 中

Node.js 中的情况有些不同。 在 Node.js 中，在任何函数之外定义的变量只有 文件范围 。 每个人 .js 文件在 Node.js 中有自己的 全局范围。

// file1.js
const answer = 42;

// file2.js
typeof answer; // 'undefined'

要在 Node.js 中创建一个在多个文件之间共享的真正全局变量，您应该使用 global 对象 。

// file1.js
global.answer = 42;

// file2.js
global.answer; // 42

使用 Webpack

与 Node.js 一样， Webpack 支持 global 您应该用来声明全局变量的对象 。 这是因为 Webpack 编译了以下 JavaScript：

console.log('Hello, World!');

在下面的 JavaScript 中，模空格以获得更好的可读性。

!(function (e) {
  var t = {};
  function r(n) {
    if (t[n]) return t[n].exports;
    var o = (t[n] = { i: n, l: !1, exports: {} });
    return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;
  }
  (r.m = e),
    (r.c = t),
    (r.d = function (e, t, n) {
      r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n });
    }),
    (r.r = function (e) {
      'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
        Object.defineProperty(e, '__esModule', { value: !0 });
    }),
    (r.t = function (e, t) {
      if ((1 & t && (e = r(e)), 8 & t)) return e;
      if (4 & t && 'object' == typeof e && e && e.__esModule) return e;
      var n = Object.create(null);
      if ((r.r(n), Object.defineProperty(n, 'default', { enumerable: !0, value: e }), 2 & t && 'string' != typeof e))
        for (var o in e)
          r.d(
            n,
            o,
            function (t) {
              return e[t];
            }.bind(null, o)
          );
      return n;
    }),
    (r.n = function (e) {
      var t =
        e && e.__esModule
          ? function () {
              return e.default;
            }
          : function () {
              return e;
            };
      return r.d(t, 'a', t), t;
    }),
    (r.o = function (e, t) {
      return Object.prototype.hasOwnProperty.call(e, t);
    }),
    (r.p = ''),
    r((r.s = 0));
})([
  function (e, t) {
    console.log('Hello, World!');
  },
]);

重要的问题是 Webpack 的编译器将单个文件包装在它们自己的函数中，因此 Webpack 编译的 JavaScript 也具有文件级范围，而不是真正的全局范围，例如通过以下方式加载 JavaScript 文件 <script> 标签。 下面是使用 Webpack 声明全局变量的方法：

global.answer = 42;

自动全局

如果您分配给未使用定义的变量 let, const 或者 var 在 严格模式 ，它会自动成为一个全局变量。

function() {
  answer = 42; 
  // `answer` becomes global scoped in the browser, or file scoped in Node.js
}

但是，在严格模式下，分配给未定义的变量会引发错误。 这是您为什么应该使用严格模式，除非你有很好的理由不这样做。

'use strict';

(function() {
  answer = 42; // 'ReferenceError: answer is not defined' instead of making `answer` a global
})();