编程笔记 html5&css&js 084 JavaScript 变量的作用域

变量作用域是程序设计中一个重要的概念，它定义了变量在何处可以被访问和使用。在JavaScript中，主要有两种类型的作用域：全局作用域和局部作用域（包括函数作用域和块级作用域）。

一、全局作用域

• 全局作用域中的变量在整个脚本或应用程序中都是可见的，可以在任何地方被访问和修改。

// 全局变量
var globalVar = "Hello, World!";

function someFunction() {
  console.log(globalVar); // 可以访问并输出 "Hello, World!"
}

someFunction();

console.log(globalVar); // 输出 "Hello, World!"
1
2
3
4
5
6
7
8
9
10

在JavaScript中，全局变量在整个网站（或单个页面）范围内都是可见的，并且可以在任何地方被访问和修改。它们通常与window对象关联在一起，在浏览器环境中，直接声明的全局变量默认是window对象的属性。

全局变量的创建方式：

1. 隐式全局变量：
   如果没有使用var、let或const关键字声明变量，则该变量会自动成为全局变量。

   myGlobalVar = "Hello, World!";
   1

   在其他脚本或函数中可以直接访问：

   console.log(myGlobalVar); // 输出 "Hello, World!"
   1

2. 显式全局变量：
   使用window对象可以明确地创建全局变量。

   window.myExplicitGlobalVar = "Hello, again!";
   1

   同样可以在任何位置访问：

   console.log(window.myExplicitGlobalVar); // 输出 "Hello, again!"
   1

然而，为了防止命名冲突和提高代码质量，现代编程实践中通常不鼓励过度依赖全局变量，而是推荐使用闭包、模块化等技术来管理作用域内的变量。例如，在Node.js中可以通过模块系统来实现跨文件共享数据；在浏览器端，随着ES6模块的引入，开发者也可以通过导入导出来管理变量的可见范围。

对于Vue.js这样的前端框架，全局状态管理通常会采用Vuex这类库，或者通过组件间的props和自定义事件进行通信，而不是直接使用全局变量。

如果你确实需要在多个组件或脚本之间共享全局状态，Vue提供了多种方式来实现这一点，如Vue.prototype挂载全局方法和属性、Vuex的状态管理库、或者在根实例上设置data属性等。

二、局部作用域（函数作用域）

• 函数作用域意味着变量在函数内部声明后，只能在该函数内部访问和修改，外部无法直接访问。

function myFunction() {
  // 在这个函数内部声明的变量具有函数作用域
  var localVar = "Local Variable";
  console.log(localVar); // 输出 "Local Variable"
}

myFunction();
console.log(localVar); // 报错，因为localVar在这个作用域外未定义
1
2
3
4
5
6
7
8

三、块级作用域（ES6引入）

• 块级作用域由let和const关键字声明的变量拥有，在它们所在的代码块（例如 {} 内部）内有效。

if (true) {
  let blockScopedVar = "Block Scoped Variable"; // 使用let声明
  console.log(blockScopedVar); // 输出 "Block Scoped Variable"
}
console.log(blockScopedVar); // 报错，因为blockScopedVar在此作用域外未定义

try {
  const anotherBlockScopedVar = "Const Block Scoped"; // 使用const声明
  console.log(anotherBlockScopedVar);
} catch(e) {}
console.log(anotherBlockScopedVar); // 同样报错，因为在try块之外不可见
1
2
3
4
5
6
7
8
9
10
11

另外，从ES6开始，还引入了let和const支持的词法作用域，以及for循环、switch语句等结构内的块级作用域，这些都增强了对变量作用域的控制能力，并减少了全局变量带来的副作用风险。同时，还有function表达式和class声明也可以创建局部作用域。

for (let i = 0; i < 5; i++) {
  // 这里的i只在当前循环体内部有作用域
}
console.log(i); // 报错，因为循环体外部的i未定义
1
2
3
4

小结

局部变量或块级变量较易掌握，合理使用全局变量更为重要。