JavaScript中let与var的十大核心差异

在JavaScript的进化历程中，let关键字的出现可以说是语言发展的重要里程碑。很多开发者虽然能说出"let是块级作用域，var是函数作用域"这样的标准答案，但要真正理解这两种声明方式的差异，我们需要深入ECMAScript规范，从编译器视角分析它们的底层差异。

一、作用域机制的范式转变

1.1 函数作用域的局限 传统的var声明方式在如下场景会产生反直觉行为：

function varTest() {
  for (var i = 0; i < 3; i++) {
    var value = i * 2;
    setTimeout(function() {
      console.log(value); // 总是输出4
    }, 100);
  }
}

这里所有回调函数共享同一个value变量，因为var的作用域是整个函数。要解决这个问题，ES5时代需要立即执行函数：

(function(i) {
  var value = i * 2;
  setTimeout(function() {
    console.log(value);
  }, 100);
})(i);

1.2 块级作用域的实现原理 let的块级作用域是通过词法环境的栈式管理实现的。每次进入块级作用域时，JS引擎会：

1. 创建新的词法环境
2. 将当前变量声明记录到环境记录器
3. 执行代码
4. 退出块时弹出该词法环境

这种机制可以通过Babel转译结果直观看到：

// 源代码
{
  let x = 10;
  console.log(x);
}

// 转译结果
{
  var _x = 10;
  console.log(_x);
}

Babel通过重命名变量来模拟块级作用域，这证明了let的本质是更严格的变量作用域管理。

二、变量提升的真相

2.1 var的创建阶段 在预编译阶段，var声明会经历：

1. 在变量对象中创建属性
2. 初始化为undefined
3. 执行阶段才进行赋值

这解释了为什么可以提前访问var变量：

console.log(a); // undefined
var a = 10;

2.2 let的暂时性死区(TDZ) 与普遍认知不同，let声明也存在提升，但处于"未初始化"状态。根据ECMA-262 13.3.1节：

• 在词法绑定被求值前访问let变量会抛出ReferenceError
• TDZ从块开始到声明语句执行期间持续存在

验证TDZ的典型示例：

let x = 10;
{
  console.log(x); // ReferenceError
  let x = 20;
}

这个报错证明了内部x的声明已经影响了外部作用域，说明变量在块开始时就已被识别。

三、全局作用域的差异

3.1 全局对象污染 在浏览器环境中：

var version = 'ES5';
console.log(window.version); // 'ES5'

let env = 'browser';
console.log(window.env); // undefined

这种差异源于ES6的全局环境声明与全局对象解耦的设计哲学。在模块化开发中，这种特性可以有效避免全局污染。

3.2 顶层作用域绑定 在Node.js环境测试：

// script.js
var a = 1;
let b = 2;

console.log(global.a); // undefined
console.log(global.b); // undefined

这说明在Node的模块系统中，顶层作用域不再是全局对象，这体现了ES模块与传统脚本的区别。

四、循环语句的革新

4.1 for循环的迭代绑定 经典闭包问题的新解法：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0,1,2
}

底层实现为每次迭代创建新的词法环境：

{
  let i = 0;
  setTimeout(() => console.log(i), 100);
}
{
  let i = 1;
  setTimeout(() => console.log(i), 100);
}
// 以此类推...

4.2 循环头部的特殊处理 在for(let ...)结构中，循环头部的声明会为每个迭代创建独立绑定。这在异步编程中特别重要：

let promises = [];
for (let i = 0; i < 5; i++) {
  promises.push(Promise.resolve().then(() => console.log(i)));
}
Promise.all(promises); // 0,1,2,3,4

五、重复声明的规范约束

5.1 错误检测的提前 let的重复声明检查发生在语法分析阶段：

// 语法错误在解析阶段就会被捕获
function check() {
  let x = 1;
  var x = 2; // SyntaxError
}

这与var的重复声明行为形成鲜明对比：

function merge() {
  var x = 1;
  var x = 2; // 合法
}

5.2 switch语句的块级作用域 在switch中使用let需要特别注意：

let x = 1;
switch(x) {
  case 1: 
    let y = 10;
    break;
  case 2:
    let y = 20; // SyntaxError
    break;
}

这是因为整个switch语句共享同一个块级作用域，可以通过子块解决：

case 1: {
  let y = 10;
  break;
}
case 2: {
  let y = 20;
  break;
}

六、性能优化的新维度

6.1 垃圾回收效率 块级作用域使得变量可以更早被回收：

function process(data) {
  // 使用var
  var temp = transformData(data);
  // temp在函数结束前都不会被回收
  
  // 使用let
  {
    let temp = transformData(data);
    // temp在此块结束后即可回收
  }
}

6.2 内存占用优化 在大型数据处理场景：

function handleBigData() {
  var buffer1 = new ArrayBuffer(1024 * 1024 * 100); // 100MB
  
  // 使用块级作用域及时释放内存
  {
    let buffer2 = new ArrayBuffer(1024 * 1024 * 100);
    // 处理buffer2...
  }
  // buffer2在此处已被回收
}

七、严格模式的影响

7.1 隐式严格模式 在ES6模块和class中，使用let会自动启用严格模式：

class Example {
  constructor() {
    let privateVar = 1;
    publicVar = 2; // ReferenceError
  }
}

7.2 删除操作的差异 在非严格模式下：

var a = 1;
delete window.a; // true

let b = 2;
delete window.b; // SyntaxError

这体现了let声明的不可配置特性。

八、实战中的最佳实践

8.1 变量声明策略 推荐的三层声明顺序：

1. const声明
2. let声明
3. var声明（仅限必要情况）

8.2 闭包优化技巧 使用let简化闭包创建：

// 传统方式
var handlers = [];
for (var i = 0; i < 5; i++) {
  (function(j) {
    handlers.push(() => console.log(j));
  })(i);
}

// 现代方式
let handlers = [];
for (let i = 0; i < 5; i++) {
  handlers.push(() => console.log(i));
}

8.3 调试技巧 利用块级作用域进行隔离调试：

function complexAlgorithm() {
  // 阶段1
  {
    let temp = stage1();
    debugger; // 可检查临时变量
  }
  
  // 阶段2
  {
    let temp = stage2();
    debugger;
  }
}

九、向后兼容的注意事项

9.1 旧版浏览器支持 使用Babel转译后的代码分析：

// 源代码
let x = 1;
{
  let x = 2;
  console.log(x);
}

// 转译结果
var x = 1;
{
  var _x = 2;
  console.log(_x);
}

这种重命名策略可能导致的意外：

typeof x; // 在原生支持let的环境会报错
// 转译后变成typeof _x可能产生不同行为

9.2 严格模式的传播 在混合使用的情况：

'use strict';
function test() {
  var x = 1;
  let y = 2;
  
  function inner() {
    // 继承严格模式
    delete y; // SyntaxError
  }
}

十、未来演进方向

10.1 块级函数声明 ES6规范中函数声明在块内的行为变化：

if (true) {
  function demo() { console.log('block'); }
}
demo(); // 在ES5非严格模式下可能成功，ES6中可能报错

10.2 模块作用域的新提案 正在讨论的module作用域：

module {
  let privateVar = 1;
  export publicVar = 2;
}
// privateVar在此不可访问

通过以上十个维度的深度解析，我们可以看到let不仅是简单的语法糖，而是JavaScript语言向更严谨、更工程化方向进化的重要标志。在实际开发中，合理运用let的特性可以显著提升代码质量，避免许多传统var带来的陷阱，但同时也要注意其特有的使用约束和浏览器兼容性要求。