ES5与ES6+写法对比：现代JavaScript迁移避坑指南

将传统 ES5 代码库迁移到 ES6+（现代 ECMAScript 规范）不仅是把 var 批量换成 let/const，更涉及运行时作用域规则、函数上下文绑定机制、对象模型与异步事件循环的底层升级。若缺乏对底层行为差异的清晰认知，机械式替换往往会带来变量未初始化抛错、this 指向漂移、原型方法丢失枚举性以及异步执行时序错乱等隐蔽缺陷。本文系统对比两代规范的核心语法与执行语义差异，梳理高频避坑要点，并提供工程化安全迁移落地路径。

一、变量声明与作用域：var 与 let/const 的本质分水岭

在 ES5 中，所有变量通过 var 声明，仅存在全局作用域与函数作用域。这导致了变量提升（Hoisting）以及循环变量闭包捕获困难等历史遗留问题。ES6 引入了 let 和 const，确立了块级作用域（Block Scope）并在执行环境中建立了“暂时性死区”（Temporal Dead Zone, 简称 TDZ）。

1. 作用域与提升机制对比

2. 代码重构对比与循环陷阱

在 ES5 中，为了在异步或事件回调中保留循环索引，必须使用立即执行函数（IIFE）强行创建独立函数作用域；ES6+ 的 let 会在每次循环迭代时创建独立的块级作用域：

// ================= ES5 写法 =================
var items = [10, 20, 30];
var funcsES5 = [];

for (var i = 0; i < items.length; i++) {
  // 必须通过 IIFE 传参锁定当前 i 的值
  (function(index) {
    funcsES5.push(function() {
      return items[index];
    });
  })(i);
}

// ================= ES6+ 写法 =================
const funcsES6 = [];
for (let j = 0; j < items.length; j++) {
  // 每次迭代绑定独立块级作用域，无需 IIFE
  funcsES6.push(() => items[j]);
}

二、函数与上下文机制：普通函数与箭头函数的陷阱排查

ES6 引入的箭头函数（Arrow Functions）极大简化了函数表达式书写，但在上下文处理上存在根本性设计转变：箭头函数没有自己的 this、arguments、super 或 new.target。它的 this 是在定义时由外层词法作用域捕获决定的，且永远不能通过 call()、apply() 或 bind() 重新改变。

1. 典型使用场景代码对比

// ================= ES5 写法 =================
function CounterES5() {
  this.count = 0;
  var self = this; // 传统方案：缓存 this 指向
  setInterval(function() {
    self.count++;
  }, 1000);
}

// ================= ES6+ 写法 =================
class CounterES6 {
  constructor() {
    this.count = 0;
    // 箭头函数自动捕获外层 constructor 的 this 词法上下文
    setInterval(() => {
      this.count++;
    }, 1000);
  }
}

const user = {
  name: "Alice",
  // 错误重构：箭头函数的词法外层是全局或模块作用域，this.name 为 undefined
  greetError: () => `Hello, ${this.name}`,
  
  // 正确写法：使用 ES6 对象方法简写语法
  greetCorrect() {
    return `Hello, ${this.name}`;
  }
};

三、面向对象范式升级：原型链组合继承到 Class 语法糖

在 ES5 中，实现面向对象类与继承需要编写复杂的原型链绑定（组合寄生继承），涉及 Parent.call(this) 与 Object.create(Parent.prototype)。ES6 的 class 和 extends 提供了标准面向对象封装，但必须注意它与原型继承之间的细微差异。

四、对象操作与数据流动：解构、展开与默认参数

在 ES5 中，从深层配置对象中取值或赋予默认值需要层层判空与三元运算。ES6+ 提供了对象解构（Destructuring）、展开运算符（Spread Operator）与默认参数语法，但在处理边界值时机制不同。

1. 默认参数的触发边界：undefined vs null

ES6 函数默认参数和解构默认值仅在属性值为 undefined 或缺失时触发。若属性值为 null、0、"" 或 false，默认值不会生效：

// ================= ES5 常见逻辑 =================
function connect(options) {
  options = options || {};
  // 若 timeout 传入 0，逻辑或 || 会误判为 falsy，被强制重置为 5000
  var timeout = options.timeout !== undefined ? options.timeout : 5000;
  return timeout;
}

// ================= ES6+ 标准解构与默认值 =================
function connectES6({ timeout = 5000, port = 8080 } = {}) {
  // 仅当 timeout === undefined 时采用 5000；传入 0 则保留 0
  return { timeout, port };
}

2. 浅拷贝与解构引用风险

Object.assign() 与对象展开运算符 { ...source } 均执行浅拷贝（Shallow Copy）。若源对象包含嵌套对象，迁移为展开语法后，修改嵌套属性依旧会污染原始数据。此外，深层解构未定义属性会导致直接崩溃：

const response = { status: 200, data: null };

// 危险迁移：深层解构 data 中的 list
// 当 data 为 null 时抛出 TypeError: Cannot destructure property 'list' of 'data' as it is null.
// const { data: { list = [] } } = response; 

// 安全做法：结合空值合并运算符（ES2020）或分层安全解构
const list = response.data?.list ?? [];

五、异步处理进化：从回调地狱到 async/await 的异常兜底

从 ES5 的回调函数（Callbacks）迁移到 ES6 的 Promise，再到 ES2017 的 async/await，代码可读性呈数量级提升。但在异常捕获与循环异步场景下，开发者极易陷入新的隐蔽陷阱。

const userIds = [101, 102, 103];

// 错误做法：forEach 不会等待 await 完成
userIds.forEach(async (id) => {
  await fetchUserData(id); // 异步未被捕获，执行顺序失控
});
console.log("全部请求已完成？实际并未等待！");

// 正确方案 A：顺序依次等待，使用 for...of 循环
for (const id of userIds) {
  await fetchUserData(id);
}

// 正确方案 B：并发同时发起请求，通过 Promise.all 统一同步
await Promise.all(userIds.map(id => fetchUserData(id)));

六、现代 JavaScript 迁移自查与决策闭环

在实际重构代码时，不建议全量盲目执行全局替换。可依照下方的语法重构决策流程图与检查清单，对每个模块进行逐级审查：

迁移落地工程化检查清单（Checklist）

• 静态检查工具介入：配置 ESLint 规则集（推荐 eslint:recommended），开启 no-var: "error" 与 prefer-const: "warn"，让语法不规范在提交前被拦截。
• 构建目标与 Polyfill：使用 Babel 或 SWC 配置 @babel/preset-env，根据项目的 browserslist 引入 core-js@3，避免旧终端因缺失 Promise 或 Array.from 导致白屏。
• 作用域与死区清查：全面移除先使用后声明的写法，杜绝依赖 window.varName 全局属性的隐式调用。
• 函数 this 与 arguments 审查：检查所有对象字面量、DOM 事件监听及类原型方法，严禁在需要动态上下文的场景中使用箭头函数；将所有 arguments 替换为 Rest 参数 ...args。
• 原型与继承平滑转换：改写为 class 时，确保子类构造函数第一行优先执行 super()，并验证外部是否存在依赖原型方法枚举（for..in）的旧逻辑。
• 异步流规范化：排查数组高阶方法（如 forEach、map）内部的 async 滥用，替换为 for...of 或 Promise.all，确保每个异步调用具备完整的 try/catch 异常分支。

通过按照上述路径逐步推进，可以在保持老旧业务逻辑稳定的同时，彻底消解 ES5 遗留的技术债务，平稳过渡到规范、可维护且高性能的现代 JavaScript 架构。