Funktionszusammensetzung in JavaScript

Funktionszusammensetzung ist die punktuelle Anwendung einer Funktion auf das Ergebnis einer anderen. Entwickler tun dies jeden Tag manuell, wenn das Nest funktioniert:

compose = (fn1, fn2) => value => fn2(fn1(value))

Das ist aber schwer zu lesen. Es gibt einen besseren Weg, die Funktionszusammensetzung zu verwenden. Anstatt sie von innen nach außen zu lesen:

add2AndSquare = (n) => square(add2(n))

Wir können eine Funktion höherer Ordnung verwenden, um sie in geordneter Weise zu verketten.

add2AndSquare = compose( add2, square)

Eine einfache Implementierung von compose wäre:

compose = (f1, f2) => value => f2( f1(value) );

Um noch mehr Flexibilität zu erhalten, können wir die Funktion reduRight verwenden:

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);

Das Lesen von links nach rechts ermöglicht eine klare Verkettung von Funktionen höherer Ordnung. Beispiele aus der Praxis sind das Hinzufügen von Authentifizierungen, Protokollierung und Kontexteigenschaften. Es ist eine Technik, die Wiederverwendbarkeit auf höchstem Niveau ermöglicht. Hier sind einige Beispiele, wie man es benutzt:

// example const add2 = (n) => n + 2; const times2 = (n) => n * 2; const times2add2 = compose(add2, times2); const add6 = compose(add2, add2, add2); times2add2(2); // 6 add2tiems2(2); // 8 add6(2); // 8

Sie könnten denken, dass dies eine erweiterte funktionale Programmierung ist und für die Frontend-Programmierung nicht relevant ist. Es ist aber auch in Einzelseitenanwendungen nützlich. Beispielsweise können Sie einer React-Komponente Verhalten hinzufügen, indem Sie Komponenten höherer Ordnung verwenden:

function logProps(InputComponent) { InputComponent.prototype.componentWillReceiveProps = function(nextProps) { console.log('Current props: ', this.props); console.log('Next props: ', nextProps); }; return InputComponent; } // EnhancedComponent will log whenever props are received const EnhancedComponent = logProps(InputComponent);

Zusammenfassend lässt sich sagen, dass die Funktionszusammensetzung die Wiederverwendbarkeit der Funktionalität auf einem sehr hohen Niveau ermöglicht. Wenn die Funktionen gut strukturiert sind, können Entwickler basierend auf dem vorhandenen Verhalten ein neues Verhalten erstellen.

Es erhöht auch die Lesbarkeit von Implementierungen. Anstatt Funktionen zu verschachteln, können Sie Funktionen klar verketten und Funktionen höherer Ordnung mit aussagekräftigen Namen erstellen.