当前位置：首页 > JavaScript

js实现类

2026-02-28 18:15:32JavaScript

实现类的基本语法

在JavaScript中，可以使用class关键字来定义类。类可以包含构造函数、方法和属性。

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

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

const instance = new MyClass('Alice');
instance.greet(); // 输出: Hello, Alice!

类的继承

通过extends关键字可以实现类的继承，子类可以继承父类的属性和方法。

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

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

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

const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.

静态方法

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

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

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

私有字段

ES2022引入了私有字段的概念，通过在字段名前加#符号来定义私有字段，只能在类内部访问。

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 输出: 1

Getter和Setter

可以使用get和set关键字定义属性的访问器，用于控制属性的读取和赋值行为。

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name) {
    const [firstName, lastName] = name.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const person = new Person('John', 'Doe');
console.log(person.fullName); // 输出: John Doe
person.fullName = 'Jane Smith';
console.log(person.firstName); // 输出: Jane

类表达式

类也可以通过表达式的方式定义，类似于函数表达式。

const MyClass = class {
  constructor(value) {
    this.value = value;
  }

  showValue() {
    console.log(this.value);
  }
};

const instance = new MyClass(42);
instance.showValue(); // 输出: 42

js实现类