如何在JavaScript中实现多类方法混入？优化工具功能复用方案

我需要把多个源类的所有方法合并到主目标类/函数中，已经实现了一种方案，但想找更优、更简洁的写法。核心要求是保持代码可读性，方法按模块（文件）分组管理，方便区分归属。

以下是我的现有实现：

function Main(){
  const self = this
  self.name = 'Main' 
  self.speak = () => {
    console.log(`called in class Main by class ${this.name}`)
  }
}

class A{
  // 为了IDE自动补全加的假变量
  // 不需要构造函数
  speakA(){
    console.log(`called in class A by class ${this.name}`)
  }
}
class B{
  speakB(){
    console.log(`called in class B by class ${this.name}`)
  }
}
class C{
  speakC(){
    console.log(`called in class C by class ${this.name}`)
  }
}


;(function assignFunctionsToObject(target, ...sources){
    sources.forEach(source => {
        Object.getOwnPropertyNames(source.prototype).forEach(name => {
            if(typeof source.prototype[name] === "function") {
              target.prototype[name] = source.prototype[name]
            }
        })
    })
})(Main, A, B, C)

let main = new Main()
main.speak()
main.speakA()
main.speakB()
main.speakC()

几种更简洁的优化方案 #

方案1：用Object.assign简化原型复制 #

利用Object.assign批量复制属性，配合Object.fromEntries过滤非方法属性，省去手动遍历的冗余代码：

function assignFunctionsToObject(target, ...sources) {
  sources.forEach(source => {
    // 过滤出原型上的方法（排除constructor）
    const methods = Object.fromEntries(
      Object.entries(source.prototype).filter(([key, val]) => 
        typeof val === 'function' && key !== 'constructor'
      )
    )
    Object.assign(target.prototype, methods)
  })
}

// 调用方式和原来一致
assignFunctionsToObject(Main, A, B, C)

方案2：类语法+封装混入函数 #

如果把主类改成class语法，代码风格更统一，混入逻辑也能封装得更清晰：

// 通用混入工具函数
function applyMixins(targetClass, ...sourceClasses) {
  sourceClasses.forEach(source => {
    Object.getOwnPropertyNames(source.prototype).forEach(name => {
      if (name !== 'constructor' && typeof source.prototype[name] === 'function') {
        targetClass.prototype[name] = source.prototype[name]
      }
    })
  })
}

// 主类改用class写法
class Main {
  constructor() {
    this.name = 'Main'
  }
  speak() {
    console.log(`called in class Main by class ${this.name}`)
  }
}

// 执行混入
applyMixins(Main, A, B, C)

const main = new Main()
main.speak()
main.speakA()
main.speakB()
main.speakC()

方案3：ES6装饰器（语义化最强） #

如果你的项目支持装饰器（比如用Babel或TypeScript配置），可以用装饰器实现最直观的混入，一眼就能看到主类整合了哪些模块：

// 装饰器函数
function mixin(...sources) {
  return target => {
    sources.forEach(source => {
      Object.getOwnPropertyNames(source.prototype).forEach(name => {
        if (name !== 'constructor' && typeof source.prototype[name] === 'function') {
          target.prototype[name] = source.prototype[name]
        }
      })
    })
  }
}

// 直接给主类添加装饰器
@mixin(A, B, C)
class Main {
  constructor() {
    this.name = 'Main'
  }
  speak() {
    console.log(`called in class Main by class ${this.name}`)
  }
}

const main = new Main()
main.speak()
main.speakA()
main.speakB()
main.speakC()

方案选择建议 #

• 想最小改动原有代码：选方案1
• 想贴合现代JS类语法：选方案2
• 追求最强语义化和可读性：在项目支持的前提下选方案3

所有方案都能保持方法按模块（文件）分组的特性，每个源类可以单独拆分到不同文件中导入，完全不影响代码的可维护性。

内容的提问来源于stack exchange，提问作者A4tur