Question

我已经搜索了一下，无法找到任何似乎可以做我想做的解决方案。我有两个具有相同属性的对象。

this.defaultEvents = {
    [FOCUS]: (e) => {
        this.focusHandler(e);
    },
    [BLUR]: (e) => e
};

this.otherEvents = {
    [FOCUS]: (e) => {
        this.otherFocusHandler(e);
    }
}

我希望能够合并这些属性，以便我得到这样的东西......

this.mergedEvents = {
    [FOCUS]: (e) => {
        this.focusHandler(e);
        this.otherFocusHandler(e);
    },
    [BLUR]: (e) => e
};

这样我就可以调用(e) => this.mergedEvents[FOCUS](e)并使用相同的参数调用两个焦点处理程序。

这个问题似乎与我试图做的最接近。我想对每个函数的调用应该有效吗？

Extend a function - merge two functions?

这个临时解决方案似乎有效，但我想我应该使用电话或申请？我对它们中的任何一个都不太熟悉。

const merged = {};

for(let key in defaultEvents) {

  if ( otherEvents.hasOwnProperty( key ) && typeof otherEvents[key] === 'function') {
    merged[key] = function(e) {
      defaultEvents[key](e);
      otherEvents[key](e);
    }
  }

}

merged[FOCUS]('test');

这里也是code pen

Answer 1

您可以迭代对象的键并为每个键创建组合函数，例如：

function merge(...events) {
  const all = events
    .map(e => Object.keys(e)) // map keys
    .reduce((a, b) => [...a, ...b], []); // flatten
  const unique = [...new Set(all)]; // remove duplicates
  return unique.reduce((r, key) => {
    const handlers = events
      .filter(e => e[key]) // filter out not relevant handlers
      .map(e => e[key]); // extract concrete handler
    r[key] = e => handlers.map(h => h(e)); // compose functions with map
    return r;
  }, {});
}

Answer 2

我有同样的情况，这是我在Typescript中的代码：

export function mergeFunctions(...funcs) {
    return function(...args) {
        funcs.filter((fn) => !!fn).forEach(fn => fn?.(...args))
    }
}

您的情况下的用法：

mergeFunctions(focusHandler, otherFocusHandler)

Answer 3

您可以使用.toString()，.replace()，eval()

var obj = {[`FOCUS`]: (e) => {
  console.log("abc")
}};

var mergedEvents = {
  [`FOCUS`]: (e) => {
    console.log(123)
  }
}

var fn = mergedEvents["FOCUS"].toString()
         .replace("console.log(123)", "console.log(123);console.log('abc')");

mergedEvents["FOCUS"] = eval(fn);

正确合并JavaScript

3 个答案: