【JavaScript】JS中的面向对象开发

---

1.面向对象开发

JavaScript 在 ES6 中引入了许多新的特性，使得面向对象编程（OOP）变得更加直观和简洁。面向对象编程是一种编程范式，使用“对象”来设计应用程序。对象是类的实例，包含属性和方法。以下是一些 ES6 中支持面向对象编程的关键特性，并结合代码进行说明。

2. 类（Class）

ES6 引入了 class 语法，用于定义类。这使得面向对象的定义更为简洁和直观。

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

    // 方法
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

// 创建类的实例
const person1 = new Person('Alice', 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

3. 继承（Inheritance）

ES6 提供了 extends 关键字用于实现类的继承，从而可以创建子类并继承父类的方法和属性。

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age); // 调用父类的构造函数
        this.jobTitle = jobTitle;
    }

    // 方法重写
    greet() {
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I work as a ${this.jobTitle}.`);
    }
}

// 创建子类的实例
const employee1 = new Employee('Bob', 25, 'Developer');
employee1.greet(); // 输出: Hello, my name is Bob, I am 25 years old, and I work as a Developer.

4. 静态方法（Static Methods）

ES6 中可以使用 static 关键字定义静态方法，静态方法是属于类本身的，而不是类的实例。

class Utility {
    static add(a, b) {
        return a + b;
    }
}

console.log(Utility.add(2, 3)); // 输出: 5

5. Getter 和 Setter

ES6 支持在类中定义 getter 和 setter 方法，用于访问和修改对象属性。

class Square {
    constructor(side) {
        this.side = side;
    }

    // getter
    get area() {
        return this.side * this.side;
    }

    // setter
    set sideLength(newSide) {
        if(newSide > 0) {
            this.side = newSide;
        } else {
            console.log('Side length must be positive.');
        }
    }
}

const square = new Square(4);
console.log(square.area); // 输出: 16

square.sideLength = 5;
console.log(square.area); // 输出: 25

square.sideLength = -3; // 输出: Side length must be positive.

6. 私有属性（Private Fields, ES2020 引入）

虽然这是 ES2020 引入的特性，但对于理解现代 JavaScript 的面向对象编程也很重要。私有属性使用 # 前缀表示，只能在类的内部访问。

class Car {
    #mileage = 0;

    constructor(make, model) {
        this.make = make;
        this.model = model;
    }

    drive(distance) {
        this.#mileage += distance;
        console.log(`Driving ${distance} miles.`);
    }

    getMileage() {
        console.log(`Mileage is ${this.#mileage} miles.`);
    }
}

const car = new Car('Toyota', 'Corolla');
car.drive(50);
car.getMileage(); // 输出: Mileage is 50 miles.

总结

ES6 通过引入 class 语法、继承、静态方法、getter 和 setter 等特性，使得 JavaScript 的面向对象编程更加简洁和强大。通过这些特性，开发者可以使用更直观的方式定义类和对象，构建复杂的应用程序逻辑。