（转载）20个JavaScript重点知识点（9）作用域链

JavaScript作用域链是由函数定义时的词法环境层级构成的链式结构，决定了变量查找时从当前作用域逐级向外层直至全局作用域的访问路径。

一、作用域基础：代码的"势力范围"

作用域（Scope）决定了变量、函数和对象的可访问范围，是JavaScript最基础的核心机制。

1. 作用域类型

• 全局作用域：脚本最外层声明的变量

const globalVar = '全局变量';function test() {  console.log(globalVar); // 可访问}

函数作用域：通过var或函数声明创建

function funcScope() {  var funcVar = '函数内部变量';  console.log(funcVar); // 正常输出}console.log(funcVar); // ReferenceError

块级作用域（ES6+）：通过let/const创建

if (true) {  let blockVar = '块级变量';  const PI = 3.14;}console.log(blockVar); // ReferenceError

二、作用域链：变量的寻址导航系统

当访问一个变量时，JavaScript会沿着作用域链逐级向上查找。

1. 链式结构形成原理

let global = 'G';
function outer() {  let outerVar = 'O';
  function inner() {    let innerVar = 'I';    console.log(innerVar);    // I（当前作用域）    console.log(outerVar);    // O（父级作用域）    console.log(global);      // G（全局作用域）  }
  inner();}
outer();

作用域链可视化：

inner作用域 → outer作用域 → 全局作用域 → null

2. 关键特性

• 静态词法作用域：链的链接关系在代码编写阶段确定

• 单向访问：内部作用域可访问外部，反之不行

• 遮蔽效应：同名变量会覆盖外层定义

let x = 10;function shadowDemo() {  let x = 20; // 遮蔽全局x  console.log(x); // 20}

三、执行上下文与作用域链的关系

每次函数调用都会创建新的执行上下文，其包含三个核心部分：

1. 变量环境（Variable Environment）

2. 词法环境（Lexical Environment）

3. this绑定

作用域链的物理实现：

ExecutionContext = {  VariableEnvironment: { /* var变量 */ },  LexicalEnvironment: {    outer: <父级词法环境引用>, // 构成作用域链的关键    /* let/const变量 */  },  ThisBinding: <this值>}

四、闭包：作用域链的经典应用

闭包的本质是函数与其词法环境的引用捆绑。

1. 经典闭包案例

function createCounter() {  let count = 0;  return {    increment: () => { count++; },    getValue: () => count  };}const counter = createCounter();counter.increment();console.log(counter.getValue()); // 1

2. 闭包的应用场景

• 模块化开发（私有变量封装）

• 防抖/节流函数

• 缓存计算结果

• 循环中正确处理异步回调

五、常见问题

1. 循环变量陷阱（经典面试题）

for (var i = 0; i < 3; i++) {  setTimeout(() => {    console.log(i); // 输出3次3  }, 100);}
// 解决方案：使用IIFE或letfor (let i = 0; i < 3; i++) {  setTimeout(() => {    console.log(i); // 0,1,2  }, 100);}

2. 变量提升的坑

console.log(a); // undefined（变量提升）var a = 10;
console.log(b); // ReferenceError（暂时性死区）let b = 20;

3. 严格模式的影响

'use strict';function strictDemo() {  undeclaredVar = 10; // 抛出ReferenceError}

总结1.尽可能最小化全局变量：使用IIFE封装代码

(function() {  // 模块代码})();

1. 2.优先使用const/let：避免变量提升问题

2. 3.合理使用闭包：注意内存泄漏风险

3. 4.模块化开发：使用ES6 Module管理作用域

4. 5.命名空间模式：减少全局污染

   const MyApp = {  utils: {},  components: {}};