JavaScript作用域详解：从基础到欺骗词法

1. 什么是作用域？

在JavaScript中，作用域是定义变量可访问性的规则集合。它决定了代码中变量、函数和对象的可见性和生命周期。V8引擎执行JavaScript代码时：

进行分词/词法分析
生成抽象语法树（AST）
最终生成可执行代码

作用域分为三种类型：

全局作用域：在整个程序中都可访问
函数作用域：在函数内部定义的变量
块级作用域 （ES6引入）：通过let和const在代码块{}中定义

2. 作用域查找规则

JavaScript使用词法作用域（静态作用域），作用域在代码编写阶段就已确定：

scss 复制代码

var a = 10

function foo(b) {
  function bar() {
    console.log(a + b); // 先在bar作用域查找 → 再到foo作用域 → 最后全局作用域
  }
  bar()
}
foo(2) // 输出 12

查找规则：

先在当前作用域查找变量
找不到则向外层作用域逐级查找
最终到达全局作用域（找不到则报错）

重要原则：作用域查找只能从内向外，不能反向进行

3. 变量声明：var vs let vs const

var 的问题

css 复制代码

console.log(a); // undefined (变量提升)
var a = 2

// 实际执行顺序：
// var a
// console.log(a)
// a = 2

let/const 的优势

ini 复制代码

// 1. 不存在变量提升
console.log(a); // ReferenceError
let a = 1;

// 2. 禁止重复声明
let b = 1;
let b = 2; // SyntaxError

// 3. 块级作用域
if (true) {
  let c = 10;
  var d = 20;
}
console.log(c); // ReferenceError
console.log(d); // 20

// 4. 暂时性死区(TDZ)
let e = 1;
if (true) {
  console.log(e); // ReferenceError (进入块级作用域后，e被锁定直到声明完成)
  let e = 2;
}

const 的特殊性

ini 复制代码

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable

// 注意：const保护的是绑定关系，不是值不变
const obj = { a: 1 };
obj.a = 2; // 允许修改属性
obj = {};  // TypeError (禁止重新赋值)

4. 欺骗词法：with 和 eval

with 的危险性

ini 复制代码

var o1 = { a: 1 };
var o2 = { b: 2 };

function foo(obj) {
  with(obj) {
    a = 2; // 当obj没有a属性时，会泄露到全局
  }
}

foo(o2);
console.log(o2); // {b:2} (未修改)
console.log(a);   // 2 (全局变量被创建

eval 的作用域污染

scss 复制代码

var b = 2;
function foo(str) {
  eval(str);  // 强行在当前作用域声明变量
  console.log(a, b); // 10, 2
}
foo('var a = 10');

// 相当于：
// function foo(str) {
//   var a = 10; // 由eval注入
//   console.log(a, b);
// }

最佳实践 ：避免使用with和eval，它们会破坏作用域规则且影响性能

5. 全局变量泄露

当变量未声明直接赋值时，会创建全局变量：

scss 复制代码

function foo() {
  a = 1; // 没有var/let/const修饰
}
foo();
console.log(a); // 1 (全局变量)

对比正确写法：

scss 复制代码

function foo() {
  var a = 1; // 局部变量
}
foo();
console.log(a); // ReferenceError

6. 作用域的最佳实践

优先使用const，其次是let，避免var
避免创建全局变量（污染全局命名空间）
使用IIFE（立即执行函数）创建私有作用域：
ini 复制代码
```
(function() {
  var privateVar = "secret";
  // 私有作用域...
})();
```
模块化开发（ES6 Modules）管理作用域

总结

理解JavaScript作用域是掌握语言核心的关键：

词法作用域在代码编写时确定
变量提升影响var声明的行为
块级作用域（let/const）解决了var的缺陷
欺骗词法（with/eval）会破坏作用域规则
作用域链决定了变量的查找路径

通过合理使用作用域，可以创建更可预测、更易维护的代码结构，避免变量冲突和意外行为。

当遇到作用域问题时，始终记住：JavaScript作用域是静态的，由代码位置决定，不是执行顺序决定。