今天，让我们探索ES6中面向对象编程的革新。想象一下，如果传统的JavaScript是一个手工作坊，那么ES6的类和模块化就是一个现代化工厂，让代码的组织和复用变得更加规范和高效。
一、为什么需要Class类的革新 🎯
在ES6之前，JavaScript通过构造函数和原型链来实现面向对象编程，这种方式不够直观，也容易出错。
传统方式的问题：
// 旧方式：构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 在原型上添加方法
Person.prototype.sayHello = function() {
console.log('你好，我是' + this.name);
};
// 问题：
// 1. 代码组织分散
// 2. 原型链概念难理解
// 3. 继承实现复杂Class的解决方案：
// 新方式：使用class
class Person {
// 构造器：专门用于初始化
constructor(name, age) {
this.name = name;
this.age = age;
}
// 方法直接写在类里面，更清晰
sayHello() {
console.log(`你好，我是${this.name}`);
}
}
// 使用更简单
const person = new Person('小明', 18);二、继承：代码复用的优雅方式 👨👦
继承让我们能够建立类之间的父子关系，像父子传承一样。
为什么需要继承？
在开发中，我们经常遇到多个类有相似的属性和方法。比如：
- 学生和老师都是人，都有姓名、年龄
- 但学生有学号，老师有工号
- 他们的打招呼方式可能不同
// ES6的继承实现
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`大家好！`);
}
}
// Student继承Person
class Student extends Person {
constructor(name, age, studentId) {
// super调用父类构造器
super(name, age);
this.studentId = studentId;
}
// 重写父类方法
sayHello() {
console.log(`同学们好，我是${this.name}，学号${this.studentId}`);
}
}三、模块化：代码组织的新方式 📦
为什么需要模块化？
想象一下，如果把所有代码都写在一个文件里：
- 代码难以维护
- 容易造成命名冲突
- 依赖关系不清晰
模块化的解决方案：
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8模块化的优势：
- 每个文件是独立的作用域
- 明确的导入导出关系
- 按需加载，提高性能
四、新的数据结构：Set和Map 🗃️
为什么需要Set？天然去重。
// 数组的问题：处理重复元素麻烦
const numbers = [1, 2, 2, 3, 3, 4];
// 去重需要额外代码
const unique = [...new Set(numbers)];
// Set的优势：天然去重
const numberSet = new Set([1, 2, 2, 3, 3, 4]);
console.log(numberSet); // Set(4) {1, 2, 3, 4}为什么需要Map？不会覆盖原来对象的方法，还可以用对象作为键。
// 对象作为字典的问题
const dict = {
"key": "value",
toString: "这会覆盖对象的toString方法！"
};
// Map的优势
const map = new Map();
map.set("key", "value");
map.set(obj, "可以用对象作为键！");- 新数据结构
- Set：专门处理唯一值的集合
- Map：比对象更适合作为字典使用
五、数组新方法：更强大的数组操作 🔧
为什么需要新的数组方法？因为传统的数组操作常常需要写很多循环代码。
新方法解决的问题：
const numbers = [1, 2, 3, 4, 5];
// 旧方式：找到第一个大于3的数
for(let i = 0; i < numbers.length; i++) {
if(numbers[i] > 3) {
console.log(numbers[i]);
break;
}
}
// 新方式：简洁明了
console.log(numbers.find(n => n > 3)); // 4
// 其他有用的新方法
numbers.includes(3); // true，检查元素是否存在
numbers.findIndex(n => n > 3); // 3，找到元素的位置ES6的这些特性让JavaScript更加强大和易用，理解它们的设计初衷和解决的问题，能帮助我们更好地使用这些特性。
