Encontré esta técnica para crear un mixin:
let fooMixin = { foo() {console.log('foo')}, }; class A { bar() {console.log('bar')} } Object.assign(A.prototype, fooMixin); sin embargo, preferiría usar la sintaxis de class también para el mixin.
Intenté esto:
class FooMixinClass { foo() {console.log('foo')} } class B { bar() {console.log('bar')} } Object.assign(B.prototype, FooMixinClass.prototype); let b = new B(); b.bar(); b.foo();pero recibe este error:
"bar"
TypeError: b.foo no es una función. (En 'b.foo()', 'b.foo' no está definido)"
Me gustaría entender por qué no funciona, ya que la inspección de FooMixinClass.prototype en tiempo de ejecución revela un objeto casi idéntico a fooMixin .
Violín: https://jsfiddle.net/a5ufjchz/
Me gustaría entender por qué no funciona, ya que la inspección de
FooMixinClass.prototypeen tiempo de ejecución revela un objeto casi idéntico afooMixin.
La palabra clave es casi. Los métodos en una clase no son enumerable y Object.assign() solo copia propiedades que son enumerable y no heredadas
Una función de utilidad:
class FooMixinClass { static foo() { console.log("foo, but static"); } foo() { console.log('foo') } } class B { bar() { console.log('bar') } } function mixin(target, source) { // ignore the Function-properties const {name,length,prototype,...statics} = Object.getOwnPropertyDescriptors(source); Object.defineProperties(target, statics); // console.log("static", statics); // ignore the constructor const {constructor,...proto} = Object.getOwnPropertyDescriptors(source.prototype); Object.defineProperties(target.prototype, proto); // console.log("proto", proto); return target; } mixin(B, FooMixinClass); let b = new B(); b.bar(); b.foo(); B.foo(); .as-console-wrapper{top:0;max-height:100%!important}