js 写了class 怎么执行

要执行JavaScript中的class，可以通过实例化（instantiation）对象来实现。首先，定义class，然后使用new关键字创建一个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.`);
  }
}
// 创建一个Person类的实例
const john = new Person('John', 30);
// 调用实例方法
john.greet(); // 输出: Hello, my name is John and I am 30 years old.

在上面的例子中，我们定义了一个名为Person的class，该class有一个构造函数constructor，它接受两个参数name和age。然后，我们创建了一个名为john的实例，并调用了greet方法，输出了一段文本。

一、定义与实例化class

定义class

在JavaScript中，定义class是通过class关键字完成的。一个class可以包含构造函数、方法和属性。构造函数用于初始化对象的状态，而方法和属性则用于定义对象的行为和特征。

class Animal {
  constructor(type, sound) {
    this.type = type;
    this.sound = sound;
  }
  makeSound() {
    console.log(`${this.type} makes a sound: ${this.sound}`);
  }
}

实例化class

实例化class是通过new关键字来完成的。new关键字调用构造函数并创建一个新的对象实例。

const dog = new Animal('Dog', 'Bark');
dog.makeSound(); // 输出: Dog makes a sound: Bark

二、class的继承

定义子类

JavaScript的class可以通过extends关键字来实现继承。子类可以继承父类的属性和方法，还可以定义自己的属性和方法。

class Mammal extends Animal {
  constructor(type, sound, hasFur) {
    super(type, sound);
    this.hasFur = hasFur;
  }
  describe() {
    console.log(`${this.type} has fur: ${this.hasFur}`);
  }
}

创建子类实例

子类的实例化方式与父类类似，但会调用子类的构造函数。

const cat = new Mammal('Cat', 'Meow', true);
cat.makeSound(); // 输出: Cat makes a sound: Meow
cat.describe(); // 输出: Cat has fur: true

三、class中的静态方法和属性

静态方法

静态方法是属于class本身的，而不是任何一个实例。可以通过static关键字定义静态方法。

class Calculator {
  static add(a, b) {
    return a + b;
  }
}
console.log(Calculator.add(5, 3)); // 输出: 8

静态属性

静态属性同样是属于class本身的，可以直接通过class名访问。

class Counter {
  static count = 0;
  static increment() {
    this.count += 1;
  }
}
Counter.increment();
console.log(Counter.count); // 输出: 1

四、class与其他编程模式的对比

与函数构造器的对比

在ES6之前，JavaScript使用函数构造器来创建对象。与class相比，函数构造器语法较为繁琐，而且不支持继承。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const john = new Person('John', 30);
john.greet(); // 输出: Hello, my name is John and I am 30 years old.

与class相比，class语法更简洁和直观，且支持现代编程特性如继承和静态方法。

与对象字面量的对比

对象字面量是一种创建单个对象的简洁方式，但不适合创建多个具有相同结构和行为的对象。

const car = {
  make: 'Toyota',
  model: 'Corolla',
  drive() {
    console.log(`Driving a ${this.make} ${this.model}`);
  }
};
car.drive(); // 输出: Driving a Toyota Corolla

对象字面量适用于简单和不重复的对象，但对于需要创建多个相似对象的情况，class无疑是更好的选择。

五、实际应用场景

封装业务逻辑

class在实际开发中常用于封装业务逻辑，以提高代码的可维护性和可读性。例如，在一个电商网站中，可以用class来表示商品、购物车等。

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  display() {
    console.log(`Product: ${this.name}, Price: $${this.price}`);
  }
}
const product1 = new Product('Laptop', 1200);
product1.display(); // 输出: Product: Laptop, Price: $1200

项目团队管理系统

在项目团队管理系统中，class可以用来表示团队成员、项目、任务等。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来实现这些功能。

class TeamMember {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  describe() {
    console.log(`${this.name} is a ${this.role}`);
  }
}
const member1 = new TeamMember('Alice', 'Developer');
member1.describe(); // 输出: Alice is a Developer

动态创建和管理UI组件

在前端开发中，class常用于动态创建和管理UI组件。例如，可以用class来表示一个可复用的按钮组件。

class Button {
  constructor(label, onClick) {
    this.label = label;
    this.onClick = onClick;
  }
  render() {
    const button = document.createElement('button');
    button.innerText = this.label;
    button.addEventListener('click', this.onClick);
    document.body.appendChild(button);
  }
}
const button1 = new Button('Click Me', () => alert('Button clicked!'));
button1.render();

六、class的高级特性

私有属性和方法

在JavaScript中，可以使用#前缀来定义私有属性和方法，这些属性和方法只能在class内部访问。

class BankAccount {
  #balance;
  constructor(initialBalance) {
    this.#balance = initialBalance;
  }
  deposit(amount) {
    this.#balance += amount;
  }
  getBalance() {
    return this.#balance;
  }
}
const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 输出: 1500

使用Mixin实现多重继承

JavaScript的class不支持多重继承，但可以通过Mixin模式来实现类似的功能。Mixin是一种组合多个对象或class功能的方式。

const CanFly = (Base) => class extends Base {
  fly() {
    console.log(`${this.name} is flying`);
  }
};
class Bird {
  constructor(name) {
    this.name = name;
  }
}
class FlyingBird extends CanFly(Bird) {}
const eagle = new FlyingBird('Eagle');
eagle.fly(); // 输出: Eagle is flying

七、最佳实践

遵循单一职责原则

每个class应该只负责一种职责，这样可以提高代码的可维护性和可读性。例如，不要将用户验证和数据处理逻辑写在同一个class中。

使用命名约定

遵循一致的命名约定可以提高代码的可读性。例如，class名使用大写驼峰命名法（如UserAccount），方法和属性名使用小写驼峰命名法（如getUserName）。

适当使用继承

虽然继承是一个强大的工具，但过度使用继承会导致代码复杂度增加。优先使用组合而非继承，除非确实有合理的继承关系。

八、未来展望

随着JavaScript的发展，class的功能和特性也在不断增加。例如，TC39提案中提到的装饰器（Decorators）和私有字段（Private Fields）将进一步增强class的能力。

总之，JavaScript的class为开发者提供了一个强大且灵活的工具，可以用于封装业务逻辑、创建可复用的组件和管理复杂的数据结构。通过合理使用class，可以大大提高代码的可维护性和可读性。