JavaScript中的依赖注入（Dependency Injection）模式如何实现？-js教程-PHP中文网

JavaScript中的依赖注入（Dependency Injection）模式如何实现？

夜晨

发布： 2025-10-04 23:12:02

原创

468人浏览过

依赖注入是通过外部传入依赖而非内部创建来解耦代码。例如，将Logger作为参数传给UserService，提升可测试性与维护性。手动注入适用于小项目，但随着规模扩大，可用DI容器自动管理依赖。如自定义Container类绑定接口与实现，通过get方法解析并缓存实例，支持构造函数注入。实际应用中建议结合TypeScript与装饰器（如InversifyJS），使用Symbol避免命名冲突，支持作用域与懒加载。核心原则是“让别人提供依赖”，增强灵活性与可扩展性。

javascript中的依赖注入（dependency injection）模式如何实现？

JavaScript中的依赖注入（Dependency Injection, DI）是一种设计模式，用于解耦组件之间的依赖关系。它通过将依赖项从外部传入目标对象，而不是在对象内部直接创建，从而提升代码的可测试性、可维护性和灵活性。

什么是依赖注入

在JavaScript中，如果一个函数或类需要使用另一个对象（比如服务、工具类），传统做法是在其内部直接创建这个对象：

const apiService = new ApiService();

这样做会让代码与ApiService紧密耦合。而依赖注入则是把ApiService作为参数传递进去：

function UserController(apiService) {
this.apiService = apiService;
}

这样UserController就不关心ApiService是如何创建的，只依赖它的接口，实现了控制反转（IoC）。

立即学习“Java免费学习笔记（深入）”；

手动实现依赖注入

最简单的DI方式是手动传递依赖。适用于小型项目或学习理解原理。

// 服务类
class Logger {
  log(message) {
    console.log(`[LOG] ${message}`);
  }
}

// 使用依赖的类
class UserService {
  constructor(logger) {
    this.logger = logger;
  }

  register(name) {
    this.logger.log(`用户 ${name} 注册了`);
  }
}

// 手动注入
const logger = new Logger();
const userService = new UserService(logger);
userService.register("Alice");

这种方式清晰明了，但随着项目变大，手动管理依赖会变得繁琐。

依图语音开放平台

查看详情

使用依赖注入容器

为了简化依赖管理，可以实现一个简单的DI容器，自动解析和注入依赖。

class Container {
  constructor() {
    this.bindings = {};
    this.instances = {};
  }

  // 绑定接口到具体实现
  bind(token, implementation) {
    this.bindings[token] = implementation;
  }

  // 获取实例（单例缓存）
  get(token) {
    if (this.instances[token]) {
      return this.instances[token];
    }

    const Implementation = this.bindings[token];
    if (!Implementation) {
      throw new Error(`未找到 ${token} 的绑定`);
    }

    const instance = new Implementation(this); // 将容器传入构造函数
    this.instances[token] = instance;
    return instance;
  }
}

配合构造函数注入使用：

class EmailService {
  send(to, msg) {
    console.log(`发送邮件至 ${to}: ${msg}`);
  }
}

class NotificationService {
  constructor(container) {
    this.emailService = container.get('EmailService');
  }

  notify(user) {
    this.emailService.send(user.email, '欢迎加入！');
  }
}

使用容器：

const container = new Container();
container.bind('Logger', Logger);
container.bind('EmailService', EmailService);
container.bind('NotificationService', NotificationService);

const noti = container.get('NotificationService');
noti.notify({ email: 'alice@example.com' });

容器负责创建对象并自动注入所需依赖，减少手动配置。