Javascript-对作用域和作用域链的理解

一、作用域类型对比

类型	关键字	特点	经典场景
全局作用域	var	随处可访问，易污染命名空间	最外层变量、window属性
函数作用域	var	函数内部有效，隔离变量	函数内部变量声明
块级作用域	let/const	{}内有效，避免变量泄露	循环、条件语句内部

二、代码演示理解

// 全局作用域
var globalVar = "全局"; // 最外层变量
window.globalVar2 = "也是全局"; // window属性

function test() {
  // 函数作用域
  var funcVar = "函数内部";
  noDeclareVar = "意外全局变量"; // 未声明直接赋值，变成全局变量！
  
  if (true) {
    // 块级作用域
    let blockVar = "块内部";
    console.log(funcVar); // ✅ 内层访问外层（输出"函数内部"）
  }
  console.log(blockVar); // ❌ ReferenceError
}
test();
console.log(noDeclareVar); // ✅ 输出"意外全局变量"（污染全局）

三、作用域链本质理解

let outer = "外层";

function parent() {
  let middle = "中间层";
  
  function child() {
    let inner = "最内层";
    console.log(outer); // ✅ 通过作用域链向上查找到全局
    console.log(middle); // ✅ 查找到父级作用域
  }
  
  child();
  console.log(inner); // ❌ 无法向下访问子作用域
}

parent();

作用域链查找过程：
child作用域 → parent作用域 → 全局作用域 → null（终止）

四、记忆口诀

"全局污染要小心，函数隔离用var，块级限制let/const
作用域链向上找，子能访问父变量，父不访问子变量"