JavaScript 类和面向对象编程

类的基础

类的定义

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

const dog = new Animal('Dog');
dog.speak(); // "Dog makes a sound"

构造函数和方法

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, I'm ${this.name}`);
    }

    getAge() {
        return this.age;
    }
}

const alice = new Person('Alice', 25);
alice.sayHello(); // "Hello, I'm Alice"

静态方法和属性

class MathHelper {
    static PI = 3.14159;

    static square(x) {
        return x * x;
    }

    static cube(x) {
        return x * x * x;
    }
}

console.log(MathHelper.PI);        // 3.14159
console.log(MathHelper.square(4)); // 16
console.log(MathHelper.cube(3));   // 27

继承

基本继承

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    bark() {
        console.log(`${this.name} barks`);
    }
}

const dog = new Dog('Rex');
dog.speak(); // "Rex makes a sound"
dog.bark();  // "Rex barks"

方法重写

class Cat extends Animal {
    speak() {
        console.log(`${this.name} meows`);
    }
}

const cat = new Cat('Whiskers');
cat.speak(); // "Whiskers meows"

super 关键字

class Bird extends Animal {
    constructor(name, wingspan) {
        super(name);
        this.wingspan = wingspan;
    }

    speak() {
        super.speak();
        console.log(`${this.name} has a wingspan of ${this.wingspan}cm`);
    }
}

const eagle = new Bird('Eagle', 200);
eagle.speak();
// "Eagle makes a sound"
// "Eagle has a wingspan of 200cm"

封装

私有字段和方法

class BankAccount {
    #balance = 0; // 私有字段

    constructor(initialBalance) {
        this.#balance = initialBalance;
    }

    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
            this.#logTransaction('deposit', amount);
        }
    }

    getBalance() {
        return this.#balance;
    }

    #logTransaction(type, amount) { // 私有方法
        console.log(`${type}: ${amount}`);
    }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // 错误：无法访问私有字段

getter 和 setter

class Circle {
    #radius = 0;

    constructor(radius) {
        this.radius = radius; // 使用 setter
    }

    get radius() {
        return this.#radius;
    }

    set radius(value) {
        if (value >= 0) {
            this.#radius = value;
        } else {
            throw new Error('Radius must be positive');
        }
    }

    get area() {
        return Math.PI * this.#radius * this.#radius;
    }
}

const circle = new Circle(5);
console.log(circle.radius); // 5
console.log(circle.area);   // 78.54...

多态

class Shape {
    getArea() {
        return 0;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super();
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

class Circle extends Shape {
    constructor(radius) {
        super();
        this.radius = radius;
    }

    getArea() {
        return Math.PI * this.radius * this.radius;
    }
}

function printArea(shape) {
    console.log(`Area: ${shape.getArea()}`);
}

const rect = new Rectangle(5, 3);
const circle = new Circle(3);

printArea(rect);   // Area: 15
printArea(circle); // Area: 28.27...

练习

1. 创建一个图书管理系统，使用类来表示图书和图书馆
2. 实现一个简单的银行账户系统，包含不同类型的账户
3. 使用私有字段实现数据封装

小结

• 理解类的基本语法和使用方法
• 掌握继承和方法重写的概念
• 学会使用私有字段和方法进行封装
• 理解 getter 和 setter 的作用
• 掌握多态的实现方式

上一章节 JavaScript 数组和对象学习 JavaScript 中的数组操作、对象属性和解构赋值 下一章节 JavaScript 异步编程学习 JavaScript 中的回调函数、Promise、async/await 等异步编程概念