ES6 类与继承：现代 JavaScript 面向对象编程

在 ES6（ECMAScript 2015）之前，JavaScript 中并没有真正意义上的类概念，开发者通常使用构造函数和原型链来模拟面向对象编程。ES6 引入了 class 关键字，为我们提供了更简洁、更接近传统面向对象语言的语法来创建类和实现继承。

如何声明一个 ES6 类

ES6 中使用 class 关键字来声明一个类，基本语法如下：

javascript

运行

class Person {
  // 构造方法
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  // 实例方法
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
  
  // 另一个实例方法
  getAge() {
    return this.age;
  }
  
  // 静态方法
  static createPerson(name, age) {
    return new Person(name, age);
  }
}

类的基本组成部分

1. 类名：按照惯例，类名使用帕斯卡命名法（首字母大写）
2. 构造方法（constructor） ：
   • 每个类只能有一个 constructor 方法
   • 当创建类的实例时，会自动调用该方法
   • 如果没有显式定义，会默认添加一个空的构造方法
3. 实例方法：定义在类中的方法，会成为实例的原型方法
4. 静态方法 ：使用 static 关键字声明，属于类本身，而不是实例

创建类的实例

使用 new 关键字来创建类的实例：

javascript

运行

// 创建实例
const person1 = new Person("Alice", 30);
person1.sayHello(); // 输出: Hello, my name is Alice
console.log(person1.getAge()); // 输出: 30

// 使用静态方法创建实例
const person2 = Person.createPerson("Bob", 25);
person2.sayHello(); // 输出: Hello, my name is Bob

类的继承

ES6 中使用 extends 关键字实现类的继承，让一个类可以继承另一个类的属性和方法。

基本继承语法

javascript

运行

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  eat() {
    console.log(`${this.name} is eating`);
  }
  
  sleep() {
    console.log(`${this.name} is sleeping`);
  }
}

// 子类继承父类
class Dog extends Animal {
  constructor(name, breed) {
    // 调用父类的构造方法
    super(name);
    this.breed = breed;
  }
  
  // 重写父类方法
  eat() {
    console.log(`${this.name} (a ${this.breed}) is eating dog food`);
  }
  
  // 子类特有方法
  bark() {
    console.log(`${this.name} is barking: Woof! Woof!`);
  }
}

继承中的关键概念

1. extends 关键字：用于声明子类继承自哪个父类
2. super 关键字 ：
   • 在子类构造方法中，必须先调用 super() 才能使用 this
   • super() 会调用父类的构造方法
   • 可以使用 super.methodName() 调用父类的方法

使用继承的示例

javascript

运行

// 创建子类实例
const myDog = new Dog("Buddy", "Golden Retriever");

// 调用继承的方法
myDog.sleep(); // 输出: Buddy is sleeping

// 调用重写的方法
myDog.eat(); // 输出: Buddy (a Golden Retriever) is eating dog food

// 调用子类特有方法
myDog.bark(); // 输出: Buddy is barking: Woof! Woof!

继承的高级用法

继承静态方法

子类会继承父类的静态方法：

javascript

运行

class Parent {
  static staticMethod() {
    return "This is a static method";
  }
}

class Child extends Parent {
  // 子类自动继承静态方法
}

console.log(Child.staticMethod()); // 输出: This is a static method

继承内置对象

ES6 类可以继承 JavaScript 内置对象，如 Array、Object 等：

javascript

运行

class MyArray extends Array {
  // 自定义方法
  first() {
    return this[0];
  }
  
  last() {
    return this[this.length - 1];
  }
}

const arr = new MyArray(1, 2, 3, 4);
console.log(arr.first()); // 输出: 1
console.log(arr.last());  // 输出: 4
console.log(arr.join('-')); // 输出: 1-2-3-4 (继承 Array 的方法)

总结

ES6 引入的类和继承机制为 JavaScript 面向对象编程带来了以下好处：

1. 语法更简洁清晰，更接近传统面向对象编程
2. 继承实现更加直观，通过 extends 关键字即可
3. 提供了 super 关键字，简化了对父类的访问
4. 更好的代码组织和可读性

虽然 ES6 类在底层仍然基于原型链实现，但它提供了更友好的语法糖，使我们能够更专注于代码逻辑而非实现细节。掌握 ES6 类和继承是现代 JavaScript 开发的基础技能之一。