JS中的嵌套mixin

Question

我想创建一个 mixin，在它混合到的对象上创建嵌套对象。

例如

const mixin = {
  top: {
    middle: {
     bottom: () => {
         console.log(`Hello ${this.name}`);
       }
     }
  }
};

const objectToBeMixed = {
  name: 'Fred Bloggs'
};

Object.assign(objectToBeMixed, mixin);

objectToBeMixed.top.middle.bottom(); // Prints "Hello Fred Blogs"

有没有人知道如何解决这个问题，以便将“this”绑定到 objectToBeMixed？

Answer 1

这不是您实现混入的方式。不要使用简单的对象，而是使用接受 context 并合并对象的函数：

const mixin = context => Object.assign(context, {
  top: {
    middle: {
      bottom: () => {
        console.log(`Hello ${context.name}`);
      }
    }
  }
});

const objectToBeMixed = {
  name: 'Fred Bloggs'
};

mixin(objectToBeMixed);

objectToBeMixed.top.middle.bottom(); // Prints "Hello Fred Blogs"

Answer 2

这里有几个可能的问题：

通过使用箭头函数，您将关闭 this。但是你要关闭的 this 不会引用你要混合的对象。有多种方法可以解决这个问题（bind 等），但它们涉及深入mixin 的副本。
如果您要多次使用该 mixin，您可能出于其他原因需要该深拷贝，当然这取决于您的用例。如果代码在这些对象上创建属性，并且它们不是深拷贝，那么将在您使用它的实例之间创建 cross-talk。（如果您不打算进行深度复制，我会 freeze 混合中的对象，以通过在其上创建属性来防止 cross-talk。）

因为最安全的事情是为每个目标设置单独的对象，我将编写一个函数来创建混合对象并应用它们，bottom 函数关闭目标参数。像这样：

function applyX(target) {
    const mixin = {
        top: {
            middle: {
                bottom() {
                    console.log(`Hello ${target.name}`);
                }
            }
        }
    };
    return Object.assign(target, mixin);
}

const objectToBeMixed = {
    name: "Fred Bloggs"
};

applyX(objectToBeMixed);

objectToBeMixed.top.middle.bottom(); // Prints "Hello Fred Bloggs"

JS中的嵌套mixin

Nested mixin in JS

javascript

mixins