JavaScript中的class语法详解
在ES6（ECMAScript 2015）之前，JavaScript是通过构造函数和原型链来实现面向对象编程的，而ES6引入的class语法，本质上是对传统构造函数和原型模式的语法糖，让面向对象代码的编写更符合传统面向对象语言的阅读习惯，同时降低了理解成本。
class的基本定义
使用class关键字可以定义一个类，类名通常首字母大写，类内部可以定义构造函数、实例方法、静态方法等内容。下面是一个最基础的类定义示例：
// 定义一个Person类
class Person {
// 构造函数，实例化时自动执行
constructor(name, age) {
this.name = name;
this.age = age;
}
// 实例方法，定义在类的原型上，所有实例共享
sayHello() {
console.log(`你好，我是${this.name}，今年${this.age}岁`);
}
}
// 实例化Person类
const person1 = new Person('张三', 20);
person1.sayHello(); // 输出：你好，我是张三，今年20岁上面的代码中，constructor是类的构造函数，当使用new关键字实例化类时，会自动调用constructor方法，其中的this指向新创建的实例。而sayHello是定义在类原型上的实例方法，所有通过Person类创建的实例都可以调用这个方法。
类的继承
类的继承通过extends关键字实现，子类可以继承父类的所有属性和方法，同时还可以扩展自己的属性和方法。如果子类需要调用父类的构造函数或者方法，可以使用super关键字。
// 定义父类Person
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`我是${this.name}`);
}
}
// 定义子类Student，继承Person类
class Student extends Person {
constructor(name, age, grade) {
// 调用父类的构造函数，必须在使用this之前调用
super(name, age);
// 子类自己的属性
this.grade = grade;
}
// 子类自己的方法
study() {
console.log(`${this.name}正在上${this.grade}年级`);
}
// 重写父类的方法
sayHello() {
// 调用父类的方法
super.sayHello();
console.log(`我的年级是${this.grade}年级`);
}
}
// 实例化子类
const student1 = new Student('李四', 18, '高三');
student1.sayHello();
// 输出：
// 我是李四
// 我的年级是高三年级
student1.study(); // 输出：李四正在上高三年级需要注意的是，在子类的构造函数中，super调用必须放在使用this之前，否则会报错。如果不定义子类的构造函数，默认会创建一个接收父类参数的构造函数并调用super。
静态方法和静态属性
静态方法和静态属性是定义在类本身上的，而不是实例上的，因此不需要实例化类就可以直接通过类名调用。静态方法使用static关键字定义，静态属性目前还没有官方的语法支持，通常直接给类添加属性来实现。
class MathUtils {
// 静态方法，计算两个数的和
static add(a, b) {
return a + b;
}
// 静态方法，计算两个数的差
static subtract(a, b) {
return a - b;
}
}
// 直接通过类名调用静态方法，不需要实例化
console.log(MathUtils.add(1, 2)); // 输出：3
console.log(MathUtils.subtract(5, 3)); // 输出：2
// 添加静态属性
MathUtils.PI = 3.1415926;
console.log(MathUtils.PI); // 输出：3.1415926静态方法通常用于定义一些和类相关但不需要依赖实例状态的功能，比如工具类的通用方法。
class的注意事项
- 类不存在变量提升，必须先定义类再使用，否则会报错。
- 类内部的方法定义不需要使用
function关键字，直接写方法名即可。 - 类内部默认是严格模式，不需要手动声明
use strict。 - 类的所有方法都是不可枚举的，而传统构造函数原型上的方法默认是可枚举的。
// 类不存在变量提升，下面的代码会报错
// const p = new Person();
// class Person {}
class TestClass {
method() {}
}
// 类的原型上的方法不可枚举
console.log(Object.keys(TestClass.prototype)); // 输出：[]
JavaScriptclass语法ES6面向对象继承静态方法 本作品最后修改时间：2026-05-24 00:39:59