JS里class是怎么写的

在JavaScript中，class的编写方式如下： 使用class关键字定义类、使用constructor方法初始化实例、使用extends关键字实现继承、以及在类中定义方法。这些特点使得JavaScript的面向对象编程更加直观和简洁。本文将详细介绍这些方面，并通过多个示例和实际应用场景帮助您全面理解JavaScript中的类。

一、类的定义和实例化

在JavaScript中，类是通过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 john = new Person('John', 25);
john.greet(); // Hello, my name is John and I am 25 years old.

在这个示例中，Person类有一个构造函数constructor，用于初始化实例的属性name和age。greet方法则用于打印问候语。

二、类的继承

JavaScript中的类继承是通过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.`);
    }
}
const rex = new Dog('Rex', 'German Shepherd');
rex.speak(); // Rex barks.

在这个示例中，Dog类继承了Animal类，并重写了Animal类的speak方法。

三、静态方法和属性

静态方法和属性是属于类本身的，而不是实例。它们通过static关键字定义。以下是一个示例：

class MathUtils {
    static square(number) {
        return number * number;
    }
}
console.log(MathUtils.square(5)); // 25

在这个示例中，MathUtils类有一个静态方法square，用于计算一个数的平方。

四、私有属性和方法

在JavaScript中，私有属性和方法是在属性和方法名前加上#号来定义的。这些属性和方法只能在类的内部访问。以下是一个示例：

class Counter {
    #count = 0;
    increment() {
        this.#count++;
    }
    getCount() {
        return this.#count;
    }
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.#count); // SyntaxError: Private field '#count' must be declared in an enclosing class

在这个示例中，Counter类有一个私有属性#count和两个方法increment和getCount。

五、实际应用场景

1、项目管理系统

在项目管理系统中，类可以用于定义各种实体，如用户、任务、项目等。例如，使用研发项目管理系统PingCode和通用项目协作软件Worktile可以有效管理项目中的各种实体。

class User {
    constructor(id, name, role) {
        this.id = id;
        this.name = name;
        this.role = role;
    }
    getRole() {
        return this.role;
    }
}
class Task {
    constructor(id, title, description, assignee) {
        this.id = id;
        this.title = title;
        this.description = description;
        this.assignee = assignee;
    }
    setAssignee(user) {
        this.assignee = user;
    }
}
const alice = new User(1, 'Alice', 'Developer');
const task1 = new Task(101, 'Implement login', 'Implement the login functionality', null);
task1.setAssignee(alice);
console.log(`${task1.title} is assigned to ${task1.assignee.name}`); // Implement login is assigned to Alice

2、电子商务系统

在电子商务系统中，类可以用于定义产品、订单、购物车等。例如：

class Product {
    constructor(id, name, price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }
    getPrice() {
        return this.price;
    }
}
class Order {
    constructor(id, products) {
        this.id = id;
        this.products = products;
    }
    getTotal() {
        return this.products.reduce((total, product) => total + product.getPrice(), 0);
    }
}
const product1 = new Product(1, 'Laptop', 1000);
const product2 = new Product(2, 'Mouse', 50);
const order = new Order(201, [product1, product2]);
console.log(`Total order cost: $${order.getTotal()}`); // Total order cost: $1050

3、教育管理系统

在教育管理系统中，类可以用于定义学生、课程、成绩等。例如：

class Student {
    constructor(id, name) {
        this.id = id;
        this.name = name;
        this.grades = {};
    }
    addGrade(course, grade) {
        this.grades[course] = grade;
    }
    getGrade(course) {
        return this.grades[course] || 'No grade';
    }
}
class Course {
    constructor(id, name) {
        this.id = id;
        this.name = name;
    }
}
const math = new Course(301, 'Mathematics');
const bob = new Student(1, 'Bob');
bob.addGrade(math.name, 'A');
console.log(`${bob.name} got grade ${bob.getGrade(math.name)} in ${math.name}`); // Bob got grade A in Mathematics

六、类的高级特性

1、类的混入

在JavaScript中，可以通过混入（Mixins）来实现多重继承。混入是指将一个类的方法复制到另一个类中。以下是一个示例：

const sayHiMixin = {
    sayHi() {
        console.log(`Hi, I am ${this.name}`);
    }
};
class Person {
    constructor(name) {
        this.name = name;
    }
}
Object.assign(Person.prototype, sayHiMixin);
const alice = new Person('Alice');
alice.sayHi(); // Hi, I am Alice

2、装饰器

装饰器是一种用于修改类及其成员的语法。在JavaScript中，装饰器还处于实验阶段，但已经有一些库支持装饰器的使用。以下是一个简单的示例：

function readonly(target, key, descriptor) {
    descriptor.writable = false;
    return descriptor;
}
class Person {
    constructor(name) {
        this.name = name;
    }
    @readonly
    getName() {
        return this.name;
    }
}
const bob = new Person('Bob');
console.log(bob.getName()); // Bob
bob.getName = function() {
    return 'Alice';
}; // TypeError: Cannot assign to read only property 'getName' of object '#<Person>'

七、总结

JavaScript中的类提供了一种简洁和直观的方式来进行面向对象编程。通过使用class关键字、继承、静态方法和属性、私有属性和方法，以及高级特性如混入和装饰器，开发者可以更有效地组织和管理代码。在实际应用中，类在各种系统中有广泛的应用，如项目管理系统、电子商务系统、教育管理系统等。希望这篇文章能帮助您全面理解和掌握JavaScript中的类。