ES6 Class 类的基本语法

---

一、回顾：ES5 中创建对象的方式（传统构造函数）

在 ES6 之前，我们使用构造函数和原型来模拟"类"的概念。

示例代码：

// 1. 创建一个构造函数
function Person(name) {
  this.name = name;
}

// 2. 在原型上添加方法
Person.prototype.sayHello = function() {
  console.log('你好，我是 ' + this.name);
};

// 3. 使用 new 关键字实例化对象
let zhangsan = new Person('张三');
zhangsan.sayHello(); // 输出：你好，我是 张三

存在的问题：

• 这种写法与 Java、C++ 等传统面向对象语言的语法差异很大。
• 对于从后端（如 Java）转向前端的开发者来说，这种写法非常令人困惑，不够直观。

二、ES6 的解决方案：Class 类

为了解决上述问题，ES6 引入了 class 关键字，提供了一种更接近传统面向对象语言的、更清晰的语法来创建对象。

基本语法结构：

class ClassName {
  // 构造函数，用于初始化对象
  constructor(parameters) {
    // 初始化属性...
  }

  // 实例方法，直接写在类体内
  method1() { ... }
  method2() { ... }
}

三、ES6 Class 写法示例

我们将上面的 ES5 构造函数改写成 ES6 Class 的形式。

示例代码：

// 1. 使用 class 关键字定义一个类
class Person {
  // 2. constructor 构造方法，相当于之前的 Person 函数
  constructor(name) {
    this.name = name; // this 指向实例对象
  }

  // 3. 在类内部直接定义方法（这些方法会自动挂在原型上）
  sayHello() {
    console.log(`你好，我是 ${this.name}`);
  }

  run() {
    console.log(`${this.name} 正在跑步。`);
  }
}

// 4. 使用 new 创建实例（和 ES5 一样）
let lisi = new Person('李四');
lisi.sayHello(); // 输出：你好，我是 李四
lisi.run();      // 输出：李四 正在跑步。

// 传参到构造函数
let wangwu = new Person('王五', 19); // 参数传到 constructor 中
wangwu.sayHello();

四、对比与总结

特性	ES5 构造函数	ES6 Class
定义	function Person() {}	class Person {}
构造方法	函数本身 function Person(name) { this.name = name; }	constructor(name) { this.name = name; }
定义方法	Person.prototype.sayHello = function() {}	直接在类内写 sayHello() {}
实例化	new Person()	new Person()
面向对象友好度	低，语法独特	高，接近传统面向对象语言

核心要点：

1. constructor 方法 ：是类的默认方法，在通过 new 命令生成对象实例时，自动调用该方法。一个类必须有 constructor 方法，如果没有显式定义，一个空的 constructor 方法会被默认添加。
2. 类的方法 ：只需要直接写在类体内，不需要加 function 关键字，方法之间也不需要逗号分隔。
3. 本质 ：ES6 的 Class 可以看作只是一个语法糖 ，它的大部分功能，ES5 都可以做到。新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。它的底层实现机制并没有改变。

五、结论

ES6 的 Class 为 JavaScript 带来了更现代化、更易读（尤其是对于有其他语言背景的开发者）的面向对象编程语法。它"换汤不换药"，最终仍是通过原型和构造函数来实现的，但在使用层面上极大地提升了开发体验。

---