Richtig zusammenführen zwei Funktionen in JavaScript

Question

Ich habe rund um SO ein wenig gesucht und kann keine Lösungen finden, die zu tun scheinen, was ich versuche zu tun. Ich habe zwei Objekte mit den gleichen Eigenschaften.

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

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

Ich möchte in der Lage sein, diese Eigenschaften zu verschmelzen, so dass ich irgendwie etwas wie diese zu erhalten ...

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

Damit ich (e) => this.mergedEvents[FOCUS](e) aufrufen kann und haben beide Fokus-Handler mit der heißen dieselben Argumente.

Diese Frage scheint am nächsten zu sein, was ich versuche zu tun. Ich denke, ein Anruf zu jeder Funktion sollte funktionieren?

Extend a function - merge two functions?

Diese temporäre Lösung scheint zu funktionieren, aber ich denke, ich sollte Anruf oder anwenden verwenden? Ich kenne sie nicht sehr gut.

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'); 

hier ist ein code pen zu

Answer 1

Sie können Schlüssel Objekt iterieren und erstellen für jeden Schlüssel zusammengesetzt Funktionen, zB:

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

Sie .toString() verwenden können, .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);