ES6的let与var：作用域、提升与父子作用域解析

"这篇文章主要探讨了JavaScript中var和let声明变量的区别，包括它们的作用域、变量提升、重声明以及在for循环中的行为差异，并通过实际示例进行了详细解释。" 在JavaScript中，`var` 和 `let` 都用于声明变量，但它们之间存在显著的差异，这些差异主要体现在以下几个方面： 1. **作用域**：`var` 声明的变量具有函数作用域，这意味着变量在整个函数范围内都有效，不论它在哪里被声明。而在ES6引入的`let`则遵循块级作用域，变量只在其所在的代码块内有效，不会延伸到代码块之外。 2. **变量提升（Hoisting）**：使用`var`声明的变量会被提升到其所在函数或全局作用域的顶部，因此可以在声明之前访问到，尽管其值是`undefined`。然而，`let`声明的变量不会被提升，尝试在声明之前访问`let`变量会导致错误，这一现象称为暂时性死区（Temporal Dead Zone, TDZ）。 3. **重复声明**：`var`允许在同一作用域内重复声明变量，后面的声明会覆盖前面的。而`let`则不允许在同一作用域内重复声明同名变量，再次声明会抛出错误。 4. **在for循环中的作用域**：在for循环中，`var`声明的变量会被提升到循环外部，导致所有迭代共享同一个变量实例。而`let`为每次迭代创建新的作用域，所以每次循环都有独立的变量实例，这就是所谓的父子作用域特性。 下面通过一些示例来进一步理解这些概念： - **作用域限制**： ```javascript function test() { var str = "张三"; if (true) { str = "李四"; // 使用var，str在函数作用域内有效 } console.log(str); // 输出"李四" } test(); let str1; if (true) { str1 = "张三"; // 使用let，str1只在当前代码块内有效 } console.log(str1); // 报错，因为str1在if代码块之外未定义 ``` - **变量提升**： ```javascript function test() { console.log(str); // 输出undefined，var被提升了 var str = "张三"; } test(); function testLet() { console.log(str1); // 报错，let不会被提升 let str1 = "李四"; } testLet(); ``` - **重复声明**： ```javascript function testVar() { var str = "张三"; var str = "李四"; // 变量被覆盖 console.log(str); // 输出"李四" } testVar(); function testLet() { let str1 = "王五"; let str1 = "赵六"; // 报错，不允许重复声明 console.log(str1); } testLet(); // 这将报错 ``` - **for循环中的作用域**： ```javascript for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); // 输出5次5，因为var i在整个函数作用域内 }, 100); } for (let j = 0; j < 5; j++) { setTimeout(function() { console.log(j); // 输出0,1,2,3,4，因为let j在每次迭代中有独立作用域 }, 100); } ``` 理解这些差异对于编写高效、无错的JavaScript代码至关重要，特别是在处理异步操作、闭包和复杂的逻辑结构时。正确使用`let`和`const`（常量声明）可以避免作用域污染和意外的变量覆盖，提高代码的可读性和维护性。