什么是一个全局变量；和 JavaScript 中的 window.variable 之间的区别吗？

在前端开发中，全局变量是一种非常常见的变量类型。它们被定义为可以从任何地方访问的变量，无论在哪个函数内部声明，都可以在整个应用程序中使用。在 JavaScript 中，全局变量可以通过在顶层代码中声明变量来创建。

JavaScript 中的全局变量

在 JavaScript 中，我们可以通过在顶层作用域中声明变量来创建全局变量。例如：

var globalVariable = 'I am a global variable';

function foo() {
  console.log(globalVariable);
}

foo(); // 输出：I am a global variable

上面的代码片段中，我们在顶层作用域中声明了一个名为 globalVariable 的变量，并且它也可以在函数 foo 中使用。这里值得注意的是，在 JavaScript 中，如果我们没有使用 var 来声明变量，那么该变量将被自动视为全局变量。例如：

function bar() {
  globalVariable2 = 'I am also a global variable';
}

bar();
console.log(globalVariable2); // 输出：I am also a global variable

在上面的代码中，我们没有使用 var 声明 globalVariable2 变量，但是它仍然可以全局访问，因为它没有被限制在函数作用域中。

window.variable 和全局变量的区别

在 JavaScript 中，全局变量和 window 对象有着一些关系。当我们声明一个全局变量时，它实际上被添加到了 window 对象中作为属性。例如：

var globalVariable3 = 'I am a global variable';

console.log(window.globalVariable3); // 输出：I am a global variable

在上面的代码中，我们可以在 window 对象上访问 globalVariable3 变量，因为它是全局变量。

但是需要注意的是，不是所有定义在顶层作用域的变量都是全局变量。如果我们使用 let 或 const 关键字来声明变量，那么它们将不会成为全局变量，而只会在当前块级作用域内存在。

如何避免滥用全局变量

尽管全局变量方便了我们的编码过程，但是滥用全局变量可能会导致代码出现一些问题。为了避免滥用全局变量，我们应该尽可能地避免在顶层作用域中声明变量，并且尽可能地使用模块化代码结构。

例如，在一个模块化的应用程序中，我们可以在每个模块中使用 export 和 import 来控制所需变量的可见性。这样可以避免命名空间污染和变量冲突的问题。

示例代码

下面是一个使用全局变量的示例：

var userName = 'John';

function greetUser() {
  console.log('Hello, ' + userName + '!');
}

greetUser(); // 输出：Hello, John!

下面是一个避免使用全局变量，使用模块化代码结构的示例：

user.js

export const userName = 'John';

greet.js

import { userName } from './user.js';

export function greetUser() {
  console.log('Hello, ' + userName + '!');
}

app.js

import { greetUser } from './greet.js';

greetUser(); // 输出：Hello, John!

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13817