当前位置：首页 > JavaScript

js实现class

2026-02-01 04:52:28JavaScript

JavaScript 实现 Class 的方法

在 JavaScript 中，可以通过多种方式实现类似传统面向对象编程中的类（Class）的概念。以下是几种常见的方法：

使用构造函数和原型链

传统的 JavaScript 使用构造函数和原型链来实现类的功能。构造函数用于初始化对象的属性，原型链用于共享方法。

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 person1 = new Person('Alice', 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

使用 ES6 的 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.

继承的实现

在 JavaScript 中，可以通过原型链或 ES6 的 extends 关键字实现继承。

使用原型链继承：

function Animal(name) {
  this.name = name;
}

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

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

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

使用 ES6 的 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;
  }

  static PI = 3.14159;
}

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

私有字段和方法

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

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); // 报错: Private field '#count' must be declared in an enclosing class

使用工厂函数

工厂函数是一种不使用 new 关键字创建对象的方式，适合需要灵活创建对象的场景。

function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
  };
}

const person1 = createPerson('Alice', 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

以上方法可以根据具体需求选择使用。ES6 的 class 语法是目前最推荐的方式，因为它提供了更清晰和直观的语法，同时兼容传统的原型链机制。

js实现class