三大变革：作用域机制重构、异步流程控制、元数据操作能力

作用域机制重构：从 var 到 let/const

ES6 最重要的变革之一就是作用域机制的重构。通过引入 let 和 const 关键字，JavaScript 获得了真正的块级作用域支持。

let 关键字

let 声明的变量具有块级作用域：

{
  let x = 1;
  console.log(x); // 1
}
console.log(x); // ReferenceError: x is not defined

const 关键字

const 用于声明常量，一旦赋值就不能重新赋值：

const PI = 3.14159;
PI = 3.14; // TypeError: Assignment to constant variable.

与 var 的对比

// var 的函数作用域
function varExample() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1
}

// let 的块级作用域
function letExample() {
  if (true) {
    let y = 1;
  }
  console.log(y); // ReferenceError: y is not defined
}

异步流程控制：从回调到 Promise

ES6 引入了 Promise，彻底改变了 JavaScript 的异步编程方式，解决了回调地狱问题。

Promise 基础用法

// 创建 Promise
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = Math.random() > 0.5;
    if (success) {
      resolve("操作成功！");
    } else {
      reject("操作失败！");
    }
  }, 1000);
});

// 使用 Promise
myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Promise 组合

// 并行执行多个 Promise
Promise.all([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
]).then(responses => {
  // 所有请求都成功完成
  return Promise.all(responses.map(res => res.json()));
}).then(data => {
  const [users, posts, comments] = data;
  // 处理数据
});

// 竞速执行，以最先完成的为准
Promise.race([
  fetch('/api/data'),
  new Promise((_, reject) => 
    setTimeout(() => reject(new Error('请求超时')), 5000)
  )
]).then(response => {
  // 处理最快完成的 Promise
});

元数据操作能力：Proxy 和 Reflect

ES6 引入了 Proxy 和 Reflect API，提供了拦截和自定义对象操作的能力。

Proxy 基础用法

const target = {
  name: 'John',
  age: 30
};

const proxy = new Proxy(target, {
  get(obj, prop) {
    console.log(`正在访问属性: ${prop}`);
    return obj[prop];
  },
  
  set(obj, prop, value) {
    console.log(`正在设置属性 ${prop} 为 ${value}`);
    obj[prop] = value;
    return true;
  }
});

proxy.name; // 正在访问属性: name
proxy.age = 31; // 正在设置属性 age 为 31

Reflect API

Reflect 提供了一系列静态方法，对应于 Object 的同名方法：

// 使用 Reflect 而不是 Object 方法
const obj = { x: 1, y: 2 };

// 旧方式
console.log(Object.getOwnPropertyDescriptor(obj, 'x'));

// 新方式
console.log(Reflect.getOwnPropertyDescriptor(obj, 'x'));

// 更安全的属性访问
if (Reflect.has(obj, 'x')) {
  console.log('对象包含 x 属性');
}

三者的协同作用

这三大变革不是孤立的，它们协同工作，共同提升了 JavaScript 的能力：

1. 作用域机制为变量管理提供了更安全、更可预测的方式
2. 异步流程控制使得处理复杂的异步操作变得更加直观
3. 元数据操作能力为框架和库的开发提供了强大的底层支持

这三者结合，使得现代 JavaScript 能够处理更加复杂的应用场景，为构建大型应用奠定了基础。