JavaScript类的封装操作示例详解
类是现代 JavaScript 开发中最常见的封装形式之一,通过类的封装可以将相关代码组织在一起,实现更好的封装和抽象。本篇攻略将介绍 JavaScript 类的封装操作,并提供两个示例供参考。
定义一个类
定义一个类的基础语法与 C++、Java 等语言类似,通过 class
关键字加上类的名称定义一个类,类的主体部分则由一对大括号组成。
class Person {
// 类的属性
name;
age;
// 类的方法
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`);
}
}
上述代码定义了一个 Person
类,该类有两个属性 name
和 age
以及一个方法 sayHello
。其中 constructor
方法是类的构造函数,用于初始化对象的属性。
实例化对象
类是一个模板,通过该模板可以创建出多个实例对象。实例化对象时,使用 new
关键字加上类的名称即可。
const person = new Person('Tom', 18);
person
实例对象拥有类的属性和方法,可以使用 .name
和 .age
访问对象的属性,使用 .sayHello()
调用对象的方法。
类的继承
JavaScript 类也支持继承操作,通过 extends
关键字来实现。
class Student extends Person {
id;
constructor(name, age, id) {
// 调用父类的构造函数
super(name, age);
this.id = id;
}
study() {
console.log(`${this.name} is studying.`);
}
}
上述代码定义了一个 Student
类,该类继承自 Person
类,具有类的属性 name
、age
和 id
,以及类的方法 constructor
和 study
。在 constructor
方法中使用 super
关键字调用父类的构造函数,以初始化 name
和 age
属性。
示例一:封装队列类
下面将给出一个封装队列的示例。
class Queue {
data = [];
// 入队操作
enqueue(item) {
this.data.push(item);
}
// 出队操作
dequeue() {
return this.data.shift();
}
// 判断队列是否为空
isEmpty() {
return this.data.length === 0;
}
}
上述代码定义了一个 Queue
类,该类有一个属性 data
、三个方法 enqueue
、dequeue
和 isEmpty
。enqueue
方法实现入队操作,将一个元素加入队列末尾;dequeue
方法实现出队操作,将队列头部元素弹出并返回;isEmpty
方法返回队列是否为空。
使用示例:
const queue = new Queue();
queue.enqueue('A');
queue.enqueue('B');
queue.enqueue('C');
console.log(queue.isEmpty()); // 输出 false
console.log(queue.dequeue()); // 输出 A
console.log(queue.dequeue()); // 输出 B
console.log(queue.dequeue()); // 输出 C
console.log(queue.isEmpty()); // 输出 true
示例二:封装日期类
下面将给出一个封装日期类的示例。
class MyDate {
year;
month;
day;
constructor(year, month, day) {
this.year = year;
this.month = month;
this.day = day;
}
// 将日期格式化为字符串
toString() {
return `${this.year}-${this.month}-${this.day}`;
}
// 获取该日期所在的年份
getYear() {
return this.year;
}
// 获取该日期所在的月份
getMonth() {
return this.month;
}
// 获取该日期所在的日份
getDay() {
return this.day;
}
// 判断当前日期是否是闰年
isLeapYear() {
return (this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0;
}
}
上述代码定义了一个 MyDate
类,该类有三个属性 year
、month
和 day
,以及四个方法 constructor
、toString
、getYear
和 isLeapYear
。其中 constructor
方法用于初始化日期的年、月、日;toString
方法用于将日期格式化为字符串;getYear
、getMonth
和 getDay
三个方法分别返回日期的年、月、日;isLeapYear
方法用于判断当前日期所在的年份是否是闰年。
使用示例:
const date = new MyDate(2021, 9, 31);
console.log(date.toString()); // 输出 2021-9-31
console.log(date.getYear()); // 输出 2021
console.log(date.getMonth()); // 输出 9
console.log(date.getDay()); // 输出 31
console.log(date.isLeapYear()); // 输出 false
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 类的封装操作示例详解 - Python技术站