ES6 class、extends有什么作用

ES6 class、extends有什么作用

ES6 引入了 class 和 extends 关键字，用于定义类和实现继承。它们的作用是让 JavaScript 的面向对象编程（OOP）更加直观和易用，同时提供了更清晰的语法来定义构造函数、方法和继承关系。

以下是 class 和 extends 的主要作用和应用场景：

1. 定义类

class 关键字用于定义一个类，类可以包含构造函数、实例方法、静态方法等。

示例：定义一个类

class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 实例方法
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }

    // 静态方法
    static info() {
        console.log('This is a Person class');
    }
}

const alice = new Person('Alice', 25);
alice.greet(); // Hello, my name is Alice
Person.info(); // This is a Person class

2. 实现继承

extends 关键字用于实现类的继承，子类可以继承父类的属性和方法，并可以重写或扩展父类的行为。

示例：实现继承

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

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

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 调用父类的构造函数
        this.breed = breed;
    }

    // 重写父类的方法
    speak() {
        console.log(`${this.name} barks.`);
    }

    // 扩展子类的方法
    fetch() {
        console.log(`${this.name} fetches the ball.`);
    }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // Rex barks.
dog.fetch(); // Rex fetches the ball.

3. 调用父类方法

在子类中，可以通过 super 关键字调用父类的构造函数、实例方法和静态方法。

示例：调用父类方法

class Cat extends Animal {
    constructor(name, color) {
        super(name); // 调用父类的构造函数
        this.color = color;
    }

    speak() {
        super.speak(); // 调用父类的 speak 方法
        console.log(`${this.name} meows.`);
    }
}

const cat = new Cat('Whiskers', 'white');
cat.speak(); // Whiskers makes a noise. Whiskers meows.

4. 静态方法和属性

static 关键字用于定义静态方法和属性，它们属于类本身，而不是类的实例。

示例：静态方法和属性

class MathUtils {
    // 静态属性
    static PI = 3.14159;

    // 静态方法
    static square(x) {
        return x * x;
    }
}

console.log(MathUtils.PI); // 3.14159
console.log(MathUtils.square(5)); // 25

5. Getter 和 Setter

class 支持定义 getter 和 setter，用于控制属性的读取和赋值。

示例：Getter 和 Setter

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

    // Getter
    get diameter() {
        return this.radius * 2;
    }

    // Setter
    set diameter(value) {
        this.radius = value / 2;
    }
}

const circle = new Circle(5);
console.log(circle.diameter); // 10
circle.diameter = 14;
console.log(circle.radius); // 7

6. 私有字段和方法

ES2022 引入了私有字段和方法的语法，通过在字段或方法名前加 # 来定义私有成员。

示例：私有字段和方法

class Counter {
    #count = 0; // 私有字段

    // 私有方法
    #increment() {
        this.#count++;
    }

    tick() {
        this.#increment();
        console.log(this.#count);
    }
}

const counter = new Counter();
counter.tick(); // 1
counter.tick(); // 2
// counter.#count; // 报错：私有字段无法访问

7. 应用场景

• 面向对象编程：定义类和实现继承，构建复杂的对象关系。
• 封装：通过私有字段和方法隐藏内部实现细节。
• 代码复用：通过继承复用父类的逻辑。
• 静态工具类：定义与实例无关的工具方法或属性。

示例：面向对象编程

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

    drive() {
        console.log(`${this.make} ${this.model} is driving.`);
    }
}

class Car extends Vehicle {
    constructor(make, model, year) {
        super(make, model);
        this.year = year;
    }

    honk() {
        console.log(`${this.make} ${this.model} is honking.`);
    }
}

const car = new Car('Toyota', 'Camry', 2020);
car.drive(); // Toyota Camry is driving.
car.honk(); // Toyota Camry is honking.

8. 与传统构造函数的对比

在 ES6 之前，JavaScript 使用构造函数和原型链来实现类和继承。class 和 extends 提供了更清晰的语法，但本质上仍然是基于原型链的语法糖。

示例：传统构造函数 vs class

// 传统构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

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

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

总结

class 和 extends 是 ES6 引入的面向对象编程语法，它们的作用是：

• 定义类：通过 class 关键字定义类，包含构造函数、实例方法、静态方法等。
• 实现继承：通过 extends 关键字实现类的继承，子类可以复用父类的逻辑。
• 简化代码：提供更清晰、更易读的语法来定义类和继承关系。

class 和 extends 使得 JavaScript 的面向对象编程更加直观和强大，同时保持了与原型链的兼容性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github