当前位置：首页 > JavaScript

js model实现

2026-03-14 01:38:33JavaScript

JavaScript 模型实现

在 JavaScript 中实现模型通常涉及面向对象编程（OOP）或函数式编程（FP）范式。以下是几种常见的实现方式：

使用构造函数和原型链

通过构造函数定义模型属性，利用原型链添加方法：

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

Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}`;
};

const person1 = new Person('Alice', 30);
console.log(person1.greet());

使用 ES6 Class 语法

ES6 的 class 语法糖提供了更清晰的模型定义方式：

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  applyDiscount(discount) {
    return this.price * (1 - discount);
  }
}

const product = new Product('Laptop', 1000);
console.log(product.applyDiscount(0.1));

工厂函数模式

通过工厂函数创建模型实例，避免使用 new 关键字：

function createUser(username, email) {
  return {
    username,
    email,
    getProfile() {
      return `${this.username} (${this.email})`;
    }
  };
}

const user = createUser('john_doe', 'john@example.com');
console.log(user.getProfile());

使用模块模式

将模型封装在模块中实现信息隐藏：

const CounterModel = (() => {
  let count = 0;

  return {
    increment() {
      count++;
    },
    decrement() {
      count--;
    },
    getCount() {
      return count;
    }
  };
})();

CounterModel.increment();
console.log(CounterModel.getCount());

基于 Proxy 的响应式模型

利用 Proxy 实现数据变化的自动响应：

function reactiveModel(initialState) {
  const handlers = {
    set(target, property, value) {
      target[property] = value;
      console.log(`Property ${property} changed to ${value}`);
      return true;
    }
  };

  return new Proxy(initialState, handlers);
}

const state = reactiveModel({ count: 0 });
state.count = 1; // 自动触发日志输出

使用 TypeScript 增强类型安全

通过 TypeScript 接口和类实现类型化模型：

interface IUser {
  id: number;
  name: string;
}

class User implements IUser {
  constructor(public id: number, public name: string) {}

  display(): string {
    return `User ${this.id}: ${this.name}`;
  }
}

const user = new User(1, 'Alice');
console.log(user.display());

选择实现方式时应考虑：

js model实现