在前端开发中，全局变量是一种非常常见的变量类型。它们被定义为可以从任何地方访问的变量，无论在哪个函数内部声明，都可以在整个应用程序中使用。在 JavaScript 中，全局变量可以通过在顶层代码中声明变量来创建。
JavaScript 中的全局变量
在 JavaScript 中，我们可以通过在顶层作用域中声明变量来创建全局变量。例如：
--- -------------- - -- -- - ------ ---------- -------- ----- - ---------------------------- - ------ -- ---- -- - ------ --------
上面的代码片段中，我们在顶层作用域中声明了一个名为 globalVariable 的变量，并且它也可以在函数 foo 中使用。这里值得注意的是，在 JavaScript 中，如果我们没有使用 var 来声明变量，那么该变量将被自动视为全局变量。例如：
-------- ----- - --------------- - -- -- ---- - ------ ---------- - ------ ----------------------------- -- ---- -- ---- - ------ --------
在上面的代码中，我们没有使用 var 声明 globalVariable2 变量，但是它仍然可以全局访问，因为它没有被限制在函数作用域中。
window.variable 和全局变量的区别
在 JavaScript 中，全局变量和 window 对象有着一些关系。当我们声明一个全局变量时，它实际上被添加到了 window 对象中作为属性。例如：
--- --------------- - -- -- - ------ ---------- ------------------------------------ -- ---- -- - ------ --------
在上面的代码中，我们可以在 window 对象上访问 globalVariable3 变量，因为它是全局变量。
但是需要注意的是，不是所有定义在顶层作用域的变量都是全局变量。如果我们使用 let 或 const 关键字来声明变量，那么它们将不会成为全局变量，而只会在当前块级作用域内存在。
如何避免滥用全局变量
尽管全局变量方便了我们的编码过程，但是滥用全局变量可能会导致代码出现一些问题。为了避免滥用全局变量，我们应该尽可能地避免在顶层作用域中声明变量，并且尽可能地使用模块化代码结构。
例如，在一个模块化的应用程序中，我们可以在每个模块中使用 export 和 import 来控制所需变量的可见性。这样可以避免命名空间污染和变量冲突的问题。
示例代码
下面是一个使用全局变量的示例：
--- -------- - ------- -------- ----------- - ------------------- - - -------- - ----- - ------------ -- --------- -----
下面是一个避免使用全局变量，使用模块化代码结构的示例：
user.js
------ ----- -------- - -------
greet.js
------ - -------- - ---- ------------ ------ -------- ----------- - ------------------- - - -------- - ----- -
app.js
------ - --------- - ---- ------------- ------------ -- --------- -----
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13817