当前位置：首页 > news >正文

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

news 2025/9/11 7:13:08

在 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);}
}

类的基本组成部分

类名：按照惯例，类名使用帕斯卡命名法（首字母大写）
构造方法（constructor）：
- 每个类只能有一个 constructor 方法
- 当创建类的实例时，会自动调用该方法
- 如果没有显式定义，会默认添加一个空的构造方法
实例方法：定义在类中的方法，会成为实例的原型方法
静态方法：使用 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!`);}
}

继承中的关键概念

extends 关键字：用于声明子类继承自哪个父类
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 的方法)