编辑“︁JavaScript ES6类”︁（章节）

= JavaScript ES6类 =

== 介绍 ==  
'''ES6类（ES6 Classes）'''是JavaScript在ECMAScript 2015（ES6）中引入的一种语法糖，旨在提供更清晰、更接近传统面向对象编程（OOP）的语法来创建构造函数和原型继承。尽管JavaScript本质上是基于原型的语言，但ES6类使得开发者能够以更直观的方式实现OOP模式，如封装、继承和多态。

ES6类并未引入新的继承模型，而是基于现有的原型链机制，提供了一种更简洁的语法结构。它特别适合初学者熟悉OOP概念，同时也能满足高级用户对代码组织和可维护性的需求。

== 基本语法 ==  
ES6类通过`class`关键字定义，包含构造函数（`constructor`）、方法以及可选的静态方法或属性。

<syntaxhighlight lang="javascript">
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("Alice", 30);
console.log(person1.greet()); // 输出: "Hello, my name is Alice and I am 30 years old."
</syntaxhighlight>

=== 关键组成部分 ===  
* '''constructor'''：类的构造函数，用于初始化对象实例。  
* '''方法'''：定义在类中的函数，会被添加到类的原型上。  
* '''静态方法'''：通过`static`关键字定义，只能通过类本身调用，而非实例。  

== 继承与`extends` ==  
ES6类支持通过`extends`关键字实现继承，子类可以继承父类的属性和方法，并可通过`super`调用父类构造函数或方法。

<syntaxhighlight lang="javascript">
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类构造函数
    this.grade = grade;
  }

  study() {
    return `${this.name} is studying in grade ${this.grade}.`;
  }
}

const student1 = new Student("Bob", 18, 12);
console.log(student1.greet()); // 继承自Person类
console.log(student1.study()); // 输出: "Bob is studying in grade 12."
</syntaxhighlight>

=== `super`关键字的作用 ===  
* 在构造函数中：调用父类的构造函数（必须在使用`this`之前调用）。  
* 在方法中：调用父类的方法（例如`super.greet()`）。  

== 静态方法与属性 ==  
静态成员属于类本身而非实例，通常用于工具函数或类级别的配置。

<syntaxhighlight lang="javascript">
class MathUtils {
  static PI = 3.14159;

  static calculateArea(radius) {
    return this.PI * radius * radius;
  }
}

console.log(MathUtils.calculateArea(5)); // 输出: 78.53975
</syntaxhighlight>

== Getter与Setter ==  
ES6类支持通过`get`和`set`定义访问器属性，用于控制对对象属性的读写操作。

<syntaxhighlight lang="javascript">
class Temperature {
  constructor(celsius) {
    this._celsius = celsius;
  }

  get fahrenheit() {
    return this._celsius * 9/5 + 32;
  }

  set fahrenheit(value) {
    this._celsius = (value - 32) * 5/9;
  }
}

const temp = new Temperature(25);
console.log(temp.fahrenheit); // 输出: 77
temp.fahrenheit = 86;
console.log(temp._celsius);   // 输出: 30
</syntaxhighlight>

== 实际应用案例 ==  
=== 场景：UI组件开发 ===  
在构建前端框架（如React或Vue）时，ES6类常用于定义可复用的组件逻辑。例如：

<syntaxhighlight lang="javascript">
class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
  }

  render() {
    const button = document.createElement("button");
    button.textContent = this.text;
    button.addEventListener("click", this.onClick);
    return button;
  }
}

const myButton = new Button("Click me", () => alert("Button clicked!"));
document.body.appendChild(myButton.render());
</syntaxhighlight>

=== 场景：游戏开发 ===  
在游戏角色系统中，类可以清晰地表示角色及其行为：

<mermaid>
classDiagram
    class Character {
        -name: string
        -health: number
        +attack(target): void
    }
    class Player {
        -score: number
        +collectItem(): void
    }
    class Enemy {
        -type: string
        +dropLoot(): void
    }
    Character <|-- Player
    Character <|-- Enemy
</mermaid>

<syntaxhighlight lang="javascript">
class Character {
  constructor(name, health) {
    this.name = name;
    this.health = health;
  }

  attack(target) {
    console.log(`${this.name} attacks ${target.name}!`);
  }
}

class Player extends Character {
  constructor(name, health, score) {
    super(name, health);
    this.score = score;
  }
}

const hero = new Player("Hero", 100, 0);
const monster = new Character("Goblin", 50);
hero.attack(monster); // 输出: "Hero attacks Goblin!"
</syntaxhighlight>

== 注意事项 ==  
1. '''类声明不会提升'''：必须先定义类，再实例化（与函数声明不同）。  
2. '''严格模式'''：类中的所有代码默认在严格模式下执行。  
3. '''不可枚举'''：类方法不可通过`Object.keys()`枚举。  

== 总结 ==  
ES6类为JavaScript提供了更接近传统OOP的语法，简化了原型继承的复杂性。通过`class`、`extends`和`super`等关键字，开发者可以更高效地组织代码，实现封装、继承和多态。无论是构建UI组件、游戏角色还是工具库，ES6类都是现代JavaScript开发的核心工具之一。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript面向对象编程]]