变量局部和全局 - JavaScript

在 JavaScript 中，变量分为局部变量和全局变量。局部变量在函数内部定义，只能在该函数中访问。全局变量则定义在函数外部，可以在脚本的任何位置访问。

局部变量

使用 var 声明的变量默认为局部变量。例如：

function example() {
  var x = 10; // 局部变量
  console.log(x);
}
example(); // 输出 10
console.log(x); // 报错，x 未定义

在上面的例子中，x 只存在于 example 函数中，无法在函数外部访问。如果在函数外部引用 x，会抛出 "未定义" 的错误。

全局变量

在 JavaScript 中，如果不使用 var 关键字声明，变量会自动成为全局变量。例如：

function example() {
  x = 10; // 全局变量
  console.log(x);
}
example(); // 输出 10
console.log(x); // 输出 10

在上面的例子中，x 在函数内部声明时没有使用 var，所以它成为了全局变量，可以在函数外部访问。

注意：全局变量可能会影响到程序的其他部分，因此应该尽量避免使用全局变量。

避免变量冲突

在 JavaScript 中，如果多个文件中都使用同一个变量名，可能会导致变量冲突的情况发生。为了避免这种情况，我们可以使用命名空间，或者使用模块化的方式组织代码。

命名空间

命名空间是一种简单的方式，可以避免变量冲突。我们可以把变量、函数等都放到一个命名空间下面。例如：

var myNamespace = {
  x: 10,
  y: 20,
  example: function() {
    console.log("Hello world!");
  }
};

在上面的例子中，myNamespace 是一个命名空间，可以包含不同的变量、函数等。

模块化

模块化是一种更高级的方式，可以更好地管理代码，避免变量冲突。在 JavaScript 中，我们可以使用 ES6 模块化，或者使用一些框架（如 Require.js、CommonJS）等。

// myModule.js
export var x = 10;
export function example() {
  console.log("Hello world!");
}

// main.js
import { x, example } from './myModule.js';
console.log(x); // 输出 10
example(); // 输出 "Hello world!"

在上面的例子中，myModule.js 是一个模块，可以包含不同的变量、函数等。在 main.js 中，我们通过 import 关键字引入这个模块中的变量、函数等。这种方式，可以有效地避免变量冲突的问题。