使用class语法定义JavaScript mixin时Object.assign拷贝原型方法失效问询

失效核心原因 #

Class 语法定义的类原型上的方法默认是*不可枚举（non-enumerable）*的，而 Object.assign() 只会复制源对象可枚举的自有属性到目标对象，因此 FooMixinClass.prototype 上的 foo 方法根本没有被复制到 B.prototype 上，最终调用 b.foo() 才会抛出未定义的错误。

你可以运行以下代码验证属性的可枚举性差异：

// 普通对象定义的mixin属性是可枚举的
console.log(Object.getOwnPropertyDescriptor(fooMixin, 'foo').enumerable) // 输出 true
// Class原型上的方法是不可枚举的
console.log(Object.getOwnPropertyDescriptor(FooMixinClass.prototype, 'foo').enumerable) // 输出 false

可行解决方案 #

方案1：完整复制原型属性 #

不用 Object.assign，改用 Object.defineProperties 结合 Object.getOwnPropertyDescriptors 复制所有自有属性，不受可枚举性限制：

Object.defineProperties(B.prototype, Object.getOwnPropertyDescriptors(FooMixinClass.prototype))

方案2：使用类继承风格的Mixin工厂 #

更符合Class语法习惯的写法，避免直接操作原型：

const FooMixin = (Base) => class extends Base {
  foo() {console.log('foo')}
}

class B {
  bar() {console.log('bar')}
}

// 应用Mixin生成新类
class BWithFoo extends FooMixin(B) {}

let b = new BWithFoo()
b.bar() // 正常输出 bar
b.foo() // 正常输出 foo

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