JavaScript Class 的正确使用方法详解
本文详细解析 JavaScript 中 Class 的核心用法,涵盖从基础语法、构造函数到继承机制的完整实现。重点讲解 extends 与 super 在子类中的应用,以及 get/set 访问器和 static 静态属性的定义方式,帮助开发者掌握现代 JS 面向对象编程的最佳实践。
一、什么是 Class?
类是构造对象的蓝图,它定义了对象的属性和方法。在 JavaScript 中,类是通过 class 关键字来定义的,它的本质是一种语法糖,仍然是基于原型链的,class 内部的属性和方法最终都会添加到构造函数的 prototype 属性上。class 关键字提供了一种更清晰、更结构化的方式来定义对象和它们之间的关系。
二、Class 的基本语法:
class Person {
// 构造函数
constructor(name, age) {
this.name = name;
this.age = age;
}
// 方法
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
// 静态方法
static greet() {
console.log("Hello!");
}
}
// 创建实例
let person1 = new Person("Alice", 30);
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 30 years old."
// 调用静态方法
Person.greet(); // 输出 "Hello!"
Class 的组成部分:
constructor:构造函数,用于创建和初始化对象。如果没有显式定义constructor,JavaScript 会自动创建一个默认的构造函数。- 方法:定义在
class内部的函数,用于描述对象的行为。 - 静态方法:使用
static关键字定义的方法,属于类本身,而不是类的实例。可以通过类名直接调用静态方法。
三、Class 的继承:
使用 extends 关键字可以实现类的继承。子类可以继承父类的属性和方法,并可以添加自己的属性和方法。
class Student extends Person {
constructor(name, age, major) {
// 调用父类的构造函数
super(name, age);
this.major = major;
}
study() {
console.log(`${this.name} is studying ${this.major}.`);
}
// 重写父类的方法
sayHello() {
console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I am studying ${this.major}.`);
}
}
let student1 = new Student("Bob", 20, "Computer Science");
student1.sayHello(); // 输出 "Hello, my name is Bob, I am 20 years old, and I am studying Computer Science."
student1.study(); // 输出 "Bob is studying Computer Science."
继承的关键点:
extends:用于指定父类。super():用于调用父类的构造函数。必须在子类的构造函数中调用super(),才能正确初始化父类的属性。- 方法重写 (Override):子类可以定义与父类同名的方法,从而覆盖父类的方法。
四、Getter 和 Setter:
可以使用 get 和 set 关键字定义属性的 getter 和 setter 方法,从而控制属性的访问和修改。
class Circle {
constructor(radius) {
this._radius = radius; // 使用 _radius 作为内部属性
}
get radius() {
return this._radius;
}
set radius(value) {
if (value <= 0) {
throw new Error("Radius must be positive.");
}
this._radius = value;
}
get area() {
return Math.PI * this._radius * this._radius;
}
}
let circle1 = new Circle(5);
console.log(circle1.radius); // 输出 5
console.log(circle1.area); // 输出 78.53981633974483
circle1.radius = 10;
console.log(circle1.radius); // 输出 10
console.log(circle1.area); // 输出 314.1592653589793
// circle1.radius = -1; // 抛出错误 "Radius must be positive."
五、静态属性:
可以使用 static 关键字定义静态属性,静态属性属于类本身,而不是类的实例。
class Counter {
static count = 0;
constructor() {
Counter.count++;
}
static getCount() {
return Counter.count;
}
}
let counter1 = new Counter();
let counter2 = new Counter();
console.log(Counter.getCount()); // 输出 2
到此这篇关于 JavaScript Class 的正确使用方法详解的文章就介绍到这了,更多相关 JavaScript Class 用法内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
D3.js 新手入门:环境搭建与第一个条形图实现
2026-11-04 10:49:48
