Es6中怎么使用class实现面向对象编程

在 JavaScript 中,面向对象的类可以通过 class关键字来定义。以下是一个简单的示例,展示了如何定义一个类、创建对象以及添加方法:

基础类定义

// 定义一个类

class MyClass {

// 构造函数,用于初始化对象的属性

constructor(param1, param2) {

this.property1 = param1;

this.property2 = param2;

}

// 方法

method1() {

console.log(`Property 1: ${this.property1}`);

}

// 另一个方法

method2() {

console.log(`Property 2: ${this.property2}`);

}

}

// 创建对象

const obj = new MyClass('value1', 'value2');

// 调用对象的方法

obj.method1(); // 输出:Property 1: value1

obj.method2(); // 输出:Property 2: value2

  • 使用 `class` 关键字定义一个类,类名多用首字母大写的驼峰式命名。

  • 类中可以包含构造函数(`constructor`),用于初始化对象的属性,this关键字则代表实例对象obj。

-constructor()方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被js引擎默认添加。

  • 类中的方法定义在类的大括号内,可以使用 `this` 关键字来访问对象的属性。

-定义方法时前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法与方法之间不需要逗号分隔,加了会报错。

-类必须使用new调用,否则会报错。

继承

JavaScript 的类支持原型继承,子类可以继承父类的属性和方法。

// 定义一个名为 Student 的子类,继承自 Person 类

class Student extends Person {

constructor(name, age, studentId) {

super(name, age); // 调用父类的构造函数

this.studentId = studentId; // 子类新增的属性

}

// 子类自己的方法

displayStudentInfo() {

console.log(`Student ID: {this.studentId}, Name: {this.name}, Age: ${this.age}`);

}

// 重写父类的方法

sayHello() {

console.log(`Hi, I'm {this.name}, a student with ID: {this.studentId}`);

}

}

// 创建 Student 类的实例

const student1 = new Student('Bob', 20, 'S12345');

student1.sayHello(); // 输出:Hi, I'm Bob, a student with ID: S12345

student1.celebrateBirthday(); // 从父类继承的方法,输出:Bob is now 21 years old! student1.displayStudentInfo(); // 输出:Student ID: S12345, Name: Bob, Age: 21

封装

可以通过将属性定义为私有属性来实现封装,防止外部直接访问和修改对象的内部状态。

class BankAccount {

// 定义私有属性

#balance;

constructor(initialBalance) {

this.#balance = initialBalance;

}

// 公共方法用于存款

deposit(amount) {

if (amount > 0) {

this.#balance += amount; console.log(`Deposited $${amount}. New balance: $${this.#balance}`);

} else {

console.log('Deposit amount must be positive');

}

}

// 公共方法用于取款

withdraw(amount) {

if (amount > 0 && amount <= this.#balance) {

this.#balance -= amount; console.log(`Withdrew $${amount}. New balance: $${this.#balance}`);

} else {

console.log('Invalid withdrawal amount');

}

}

// 提供一个公共方法来获取私有属性的值

getBalance() {

return this.#balance;

}

}

// 测试 BankAccount 类

const account = new BankAccount(1000);

account.deposit(500); // 输出:Deposited 500. New balance: 1500

ccount.withdraw(200); // 输出:Withdrew 200. New balance: 1300 console.log(account.getBalance()); // 输出:1300 // 尝试直接访问私有属性会报错 // console.log(account.#balance); // 会在编译时出错

静态属性和方法

静态属性和方法属于类本身,而不是类的实例。

class MathUtils {

// 静态属性

static PI = 3.14159;

// 静态方法

static calculateCircleArea(radius) {

return this.PI * radius * radius;

}

}

// 使用静态属性和方法,无需创建实例

console.log(MathUtils.PI); // 输出:3.14159

console.log(MathUtils.calculateCircleArea(5)); // 输出:78.53975

Getter 和 Setter

可以使用getter和setter来控制对对象属性的访问和修改。

class Product { constructor(price) {

this._price = price; // 使用 _ 前缀表示这是一个内部属性

}

// getter 方法

get price() {

return this._price;

}

// setter 方法

set price(newPrice) {

if (newPrice > 0) {

this._price = newPrice;

} else {

console.log('Price must be positive');

}

}

}

// 测试 getter 和 setter

const product = new Product(100);

console.log(product.price); // 使用 getter,输出:100

product.price = 200; // 使用 setter

console.log(product.price); // 输出:200

product.price = -50; // 尝试设置负值,会触发 setter 中的验证逻辑 // 输出:Price must be positive

相关推荐
不爱吃糖的程序媛40 分钟前
Electron 如何判断运行平台是鸿蒙系统(OpenHarmony)
javascript·electron·harmonyos
Hilaku1 小时前
我用AI重构了一段500行的屎山代码,这是我的Prompt和思考过程
前端·javascript·架构
Cxiaomu1 小时前
React Native App 自动检测版本更新完整实现指南
javascript·react native·react.js
掘金安东尼2 小时前
前端周刊第439期(2025年11月3日–11月9日)
前端·javascript·vue.js
起这个名字2 小时前
微前端应用通信使用和原理
前端·javascript·vue.js
鹏多多3 小时前
Web使用natapp进行内网穿透和预览本地页面
前端·javascript
钱端工程师3 小时前
uniapp封装uni.request请求,实现重复接口请求中断上次请求(防抖)
前端·javascript·uni-app
茶憶3 小时前
uni-app app移动端实现纵向滑块功能,并伴随自动播放
javascript·vue.js·uni-app·html·scss
茶憶3 小时前
uniapp移动端实现触摸滑动功能:上下滑动展开收起内容,左右滑动删除列表
前端·javascript·vue.js·uni-app
Ayn慢慢3 小时前
uni-app PDA焦点录入实现
前端·javascript·uni-app