当前位置：首页 > JavaScript

js实现类

2026-04-03 18:42:55JavaScript

JavaScript 实现类的方式

JavaScript 中可以通过多种方式实现类的概念，以下是几种常见的方法：

构造函数模式

使用构造函数和 new 关键字创建对象实例。构造函数名通常首字母大写以区分普通函数。

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

const person1 = new Person('Alice', 25);
person1.sayHello();

原型模式

通过原型链共享方法和属性，避免每个实例都创建相同的函数。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

const person1 = new Person('Alice', 25);
person1.sayHello();

ES6 类语法

ES6 引入了 class 关键字，语法更接近传统面向对象语言。

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

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

const person1 = new Person('Alice', 25);
person1.sayHello();

工厂函数模式

使用闭包和对象字面量创建对象，无需 new 关键字。

js实现类

function createPerson(name, age) {
  return {
    name,
    age,
    sayHello() {
      console.log(`Hello, my name is ${this.name}`);
    }
  };
}

const person1 = createPerson('Alice', 25);
person1.sayHello();

使用 Object.create()

基于现有对象创建新对象，实现原型继承。

const personProto = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person1 = Object.create(personProto);
person1.name = 'Alice';
person1.age = 25;
person1.sayHello();

继承的实现

原型链继承

通过将子类的原型指向父类的实例实现继承。

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

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Alice', 10);
child.sayName();

ES6 类继承

使用 extends 关键字实现继承。

js实现类

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

  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('Alice', 10);
child.sayName();

静态方法和属性

使用 static 关键字定义类级别的方法和属性。

class Person {
  static species = 'Homo sapiens';

  static describe() {
    console.log('This is a Person class');
  }

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

Person.describe();
console.log(Person.species);

私有字段和方法

ES2022 引入了真正的私有字段和方法，使用 # 前缀。

class Person {
  #privateField = 'secret';

  #privateMethod() {
    console.log('This is private');
  }

  publicMethod() {
    this.#privateMethod();
    console.log(this.#privateField);
  }
}

const person = new Person();
person.publicMethod();

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) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const person = new Person('Alice', 'Smith');
console.log(person.fullName);
person.fullName = 'Bob Johnson';
console.log(person.firstName);

混入模式

通过组合多个对象的功能实现多重继承。

const canEat = {
  eat() {
    console.log('Eating');
  }
};

const canWalk = {
  walk() {
    console.log('Walking');
  }
};

function mixin(...mixins) {
  return function(target) {
    Object.assign(target.prototype, ...mixins);
  };
}

@mixin(canEat, canWalk)
class Person {}

const person = new Person();
person.eat();
person.walk();

JavaScript 提供了多种灵活的方式来实现类和面向对象编程，可以根据具体需求选择最适合的方法。

标签: js