js 作用域

<think>嗯，用户想了解JavaScript的作用域机制。首先，我需要回忆一下JavaScript中的作用域类型，比如全局作用域、函数作用域和块级作用域（虽然ES6之前没有块级作用域）。然后，要解释变量声明方式（var、let、const）对作用域的影响。 记得用户提供的引用中提到了var没有块级作用域，比如在for循环里定义的变量，外部也能访问。这可能导致闭包中的问题，例如循环中创建的函数都引用同一个变量。所以需要详细说明这一点，并举例说明闭包如何解决这个问题，或者ES6的let如何引入块级作用域。 另外，引用中提到了作用域链的概念，函数可以访问外部作用域的变量。还有词法作用域（静态作用域），即作用域在函数定义时确定，而不是运行时。需要解释这些概念，并可能结合闭包的例子，比如内部函数访问外部函数的变量。 还要注意this的绑定机制，虽然用户的问题主要是作用域，但引用3提到了this的不同行为，可能需要在相关部分稍微提及，但重点还是作用域本身。 用户提供的示例代码中，闭包和变量提升的问题也需要解释清楚。比如，使用var在循环中导致的问题，如何通过IIFE或let来解决。同时，要区分函数作用域和块级作用域的区别，以及变量提升带来的影响。 可能还需要提到严格模式（use strict）对作用域的影响，以及ES6之后的作用域变化。最后，总结JavaScript作用域的关键点，并生成相关问题，帮助用户进一步学习。</think>### JavaScript作用域机制详解 JavaScript的作用域机制遵循**词法作用域（Lexical Scoping）**规则，其核心特点是作用域在代码编写阶段确定，而非运行时确定[^2]。以下是关键机制的分步解析： --- #### 一、作用域类型 1. **全局作用域** 在函数外部声明的变量属于全局作用域，可被任何代码访问 ```javascript var globalVar = "全局变量"; ``` 2. **函数作用域** 通过`var`声明的变量具有函数级作用域： ```javascript function foo() { var localVar = "局部变量"; // 仅在foo函数内部可见 } ``` 3. **块级作用域（ES6+）** `let/const`引入块级作用域，作用域限定在`{}`内： ```javascript if (true) { let blockScoped = "块级变量"; // 仅在当前代码块可见 } ``` --- #### 二、作用域链机制 当访问变量时，JavaScript会按以下顺序查找： 1. 当前函数作用域 → 2. 外层嵌套函数作用域 → 3. 全局作用域 ```javascript function outer() { var outerVar = 10; function inner() { console.log(outerVar); // 访问外层作用域的变量 } inner(); } ``` --- #### 三、闭包与作用域 闭包通过保留对外部变量的引用来突破作用域限制[^1][^4]： ```javascript function createCounter() { let count = 0; // 闭包保留对count的引用 return function() { return ++count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 ``` --- #### 四、变量提升（Hoisting） `var`声明的变量会提升到作用域顶部，但赋值不提升： ```javascript console.log(hoistedVar); // undefined var hoistedVar = "提升变量"; ``` 而`let/const`存在暂时性死区（TDZ），禁止在声明前访问： ```javascript console.log(tdzVar); // ReferenceError let tdzVar = "块级变量"; ``` --- #### 五、作用域与`this`绑定的区别 注意：作用域机制与`this`指向无关。`this`是动态绑定的，取决于调用方式[^3]： ```javascript const obj = { value: 42, getValue: function() { console.log(this.value); // this指向obj } }; ``` --- ### 常见问题解析 **问题：为何以下代码输出3次3？** ```javascript var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log(i) }; } funcs[0](); // 3 (所有闭包共享同一个i) ``` **解决方案：** 1. 使用IIFE创建独立作用域： ```javascript for (var i = 0; i < 3; i++) { (function(j) { funcs[j] = function() { console.log(j) }; })(i); } ``` 2. 改用`let`声明变量： ```javascript for (let i = 0; i < 3; i++) { /* 每个循环创建新的块级作用域 */ } ``` ---