ES5与ES6语法特性差异对照：现代JavaScript开发必读

一、变量声明与作用域机制对照

在ES5规范中，变量声明仅有一种手段：var 关键字。这种设计长期存在两项工程隐患：一是变量仅受函数作用域约束，缺乏块级作用域；二是声明提升（Hoisting）机制导致变量在声明行之前即可被访问，初始值为 undefined。

ES6引入了 let 与 const，确立了块级作用域规则。任何一对花括号 {}（如 if 分支、for 循环体）都会创建独立的词法环境。同时引入了暂时性死区（Temporal Dead Zone，TDZ）：在代码执行进入块级作用域到变量声明语句被执行之前，该变量不可访问，任何提前读取均会直接抛出 ReferenceError。

// 1. 变量提升与泄漏
console.log(count); // 输出: undefined
var count = 10;

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 连续输出3次: 3
  }, 100);
}

// 2. 允许重复声明
var rate = 0.05;
var rate = 0.08; // 无报错，意外静默覆盖

// 1. 暂时性死区严格校验
// console.log(count); // 抛出 ReferenceError!
let count = 10;

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 正常输出: 0, 1, 2 (每次迭代独立绑定)
  }, 100);
}

// 2. 禁止重复声明
const rate = 0.05;
// const rate = 0.08; // SyntaxError: 已声明

二、函数模型与上下文（this）绑定演进

ES5中的普通函数扮演着“双重身份”：既可以作为普通过程执行，也可以作为构造器配合 new 实例化对象。这导致普通函数的 this 绑定规则高度依赖运行时的调用方式（默认绑定、隐式绑定、显式绑定、new绑定）。在处理事件回调或定时器时，开发者必须频繁使用 var that = this 或 Function.prototype.bind 来保留外层上下文。

ES6引入的箭头函数（Arrow Functions，() => {}）彻底改变了这一设计。箭头函数没有属于自己的 this、arguments、super 或 new.target，它的 this 严格继承自定义时所处的词法外层环境，并且无法通过 call 或 apply 改变。

function UserWidget(name) {
  this.name = name;
  var self = this; // 传统手动保存上下文

  setTimeout(function() {
    // 若不用 self，此处的 this 默认指向 window 或 undefined
    console.log("Hello, " + self.name);
  }, 500);
}

// 参数默认值与不定参处理
function add(a, b) {
  a = (typeof a !== 'undefined') ? a : 10;
  b = (typeof b !== 'undefined') ? b : 20;
  // 类数组对象转换为真数组
  var extra = Array.prototype.slice.call(arguments, 2);
  return a + b + (extra.length ? extra[0] : 0);
}

function UserWidget(name) {
  this.name = name;
  // 箭头函数直接穿透捕获外部 this
  setTimeout(() => {
    console.log(`Hello, ${this.name}`);
  }, 500);
}

// 原生参数默认值与 Rest 剩余参数
const add = (a = 10, b = 20, ...extra) => {
  // extra 原生即为真数组，支持 filter/map/reduce
  const extraSum = extra.reduce((acc, curr) => acc + curr, 0);
  return a + b + extraSum;
};

三、面向对象体系重构：原型链与Class

JavaScript始终是一门基于原型（Prototype-based）的面向对象语言。在ES5中，实现一个完整的类继承体系需要经历繁琐的“寄生组合式继承”样板代码：先在子类构造函数中通过 Parent.call(this, ...) 继承实例属性，再通过 Object.create(Parent.prototype) 继承原型链方法，最后必须手动将 Child.prototype.constructor 指回子类本身。

ES6提供了清晰的 class、constructor、extends 与 super 语法。虽然其底层机制仍然是原型继承，但封装了复杂的链条组装细节，并在语言层面增加了硬性保护：class 声明不会提升、类内部方法默认不可枚举、必须通过 new 关键字调用。

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return this.name + " makes a sound.";
};

function Dog(name, breed) {
  Animal.call(this, name); // 借用父类构造函数
  this.breed = breed;
}
// 原型链桥接
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复构造器指针

Dog.prototype.bark = function() {
  return this.name + " barks!";
};

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 显式调用父类构造器并初始化 this
    this.breed = breed;
  }
  bark() {
    return `${this.name} barks!`;
  }
}

四、数据操作与语法糖：模板字面量、解构与展开

在日常业务数据处理中，ES5往往需要编写大量胶水代码。例如构建包含变量的多行HTML片段必须依靠加号 + 拼接；从复杂配置对象中读取属性需要逐行赋值；浅拷贝对象或拼接数组需要调用 Array.prototype.concat 或自定义遍历函数。

ES6带来了四项关键数据表达能力：

• 模板字面量（Template Literals）：使用反引号 `...` 包裹，天然支持多行字符串与 ${expression} 嵌入式表达式插值。
• 解构赋值（Destructuring Assignment）：允许依据模式匹配，直接从数组或对象中提取深层字段并赋给变量，支持设置解构默认值与属性重命名。
• 展开运算符（Spread Operator ...）：在数组或对象字面量中快速平铺元素，取代繁琐的 concat 或 Object.assign。
• 增强的对象字面量：当属性名与变量同名时可简写 { name }，方法定义可直接书写 render() {}，并支持计算属性名 [prefix + 'id']: 123。

// 现代 ES6 数据表达综合示例
const response = {
  status: 200,
  data: {
    userId: "u-9842",
    profile: { nickname: "Developer", role: "admin" },
    tags: ["javascript", "frontend"]
  }
};

// 1. 对象深层解构与默认值重命名
const {
  status,
  data: {
    profile: { nickname: userName, role = "guest" },
    tags
  }
} = response;

// 2. 展开运算符合并数组与克隆对象
const allTags = [...tags, "es6-standard"];
const userSummary = { ...response.data.profile, active: true };

// 3. 模板字面量组装可读文本
const message = `用户 ${userName} (角色: ${role}) 请求状态: ${status}，包含标签: ${allTags.join(", ")}`;
console.log(message);

五、异步处理模型演进：从回调地狱到Promise

JavaScript单线程架构决定了其所有耗时任务（网络请求、文件I/O、定时任务）必须依赖异步调度。ES5时代唯一的标准异步通信机制是高阶回调函数（Callback）。当多个异步任务存在严格先后依赖时，回调层层嵌套形成“回调地狱（Callback Hell）”，导致代码缩进失控、异常捕获极其脆弱。

ES6将 Promise 正式纳入标准库。Promise 是一个保存未来发生事件结果的代理容器，拥有清晰的三种状态：pending（挂起）、fulfilled（已成功）、rejected（已失败）。状态一旦改变即凝固不变。通过 .then() 和 .catch() 链式调用，异步任务转化为线性流转，异常可以在链条末端集中捕获。这不仅彻底解决了嵌套缩进问题，更为ES2017引入 async / await 铺平了道路。

// 嵌套多层，错误分散，难以维护
getUser(userId, function(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, function(err, orders) {
    if (err) return handleError(err);
    getOrderDetails(orders[0].id, function(err, detail) {
      if (err) return handleError(err);
      renderUI(detail);
    });
  });
});

// 线性平铺，统一末端错误捕获
getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => getOrderDetails(orders[0].id))
  .then(detail => {
    renderUI(detail);
  })
  .catch(err => {
    // 集中式统一异常处理
    handleError(err);
  });

六、模块系统演进：从社区方案到官方标准 ESM

在ES5时代，JavaScript语言本身不存在模块系统。前端开发者只能依靠立即执行函数表达式（IIFE）结合全局命名空间对象（例如 window.App = window.App || {}）来规避变量污染，或者依赖RequireJS（AMD规范）、Sea.js（CMD规范）；而Node.js端则自建了CommonJS规范（require() / module.exports）。这种割裂导致代码无法在浏览器与服务端实现无缝复用。

ES6带来了官方标准的语言级模块系统：ES Modules（ESM），通过 import 与 export 关键字实现。与CommonJS在运行时动态同步加载不同，ESM具有静态编译期分析能力。模块间的依赖关系在代码执行前就已经确定，这为构建工具（Webpack、Rollup、Vite）实现静态死代码剔除（Tree-Shaking）提供了语言层面的理论基石，大幅削减了最终线上产物的体积。

七、存量项目从ES5迁移至ES6的标准操作流程

将旧版遗留的ES5代码库迁移至现代ES6架构时，切忌盲目发起全量重写。合理的迁移路线应当遵循“工具链先行、静态规约护航、原子替换推进、系统级重构收尾”的五步原则。

1. 配置现代化构建链条：在工程中集成现代打包工具（如 Vite 或 Webpack 5），配置 @babel/preset-env 和 core-js。即使源文件全面使用ES6+语法，构建系统仍能按预设的浏览器目标名单（Browserslist）自动向下编译和注入Polyfill垫片。
2. 确立 ESLint 自动化检查：在项目中引入规范包，开启 no-var（禁止使用var）、prefer-const（优先const）、prefer-template（优先模板字符串）以及 prefer-arrow-callback 等规则。先开启warning警告，配合 eslint --fix 自动修正机械性语法。
3. 实施局部低风险替换：首先替换字符串加号拼接为模板字面量，将普通简单参数赋值改为解构赋值。这一步纯属语法糖升级，对业务逻辑与原型结构无破坏风险。
4. 逐模块重塑异步与类结构：将深层回调函数转换为Promise封装；对于原有的构造函数和原型继承，使用 class 与 extends 进行结构化梳理，剥除冗余的 prototype.constructor 修复代码。
5. 执行全套自动化回归测试：在每次模块级改造后，必须通过单元测试和集成测试，确保对象方法内部的 this 行为没有因误用箭头函数而产生偏离。

八、ES5与ES6核心语法全景总结对照

综合前文各章节的解析，下表及图示全方位概括了从ES5过渡到ES6的关键语法特性演变及其工程价值：