Funktionssammensætning i JavaScript

Funktionssammensætning er den punktvise anvendelse af en funktion på resultatet af en anden. Udviklere gør det manuelt hver dag, når reden fungerer:

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

Men det er svært at læse. Der er en bedre måde at bruge funktionssammensætning på. I stedet for at læse dem indefra og ud:

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

Vi kan bruge en højere ordre-funktion til at kæde dem på en ordnet måde.

add2AndSquare = compose( add2, square)

En simpel implementering af compose ville være:

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

For at få endnu mere fleksibilitet kan vi bruge funktionen reducere ret:

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

At læse komponere fra venstre mod højre muliggør en klar sammenkædning af højere ordensfunktioner. Eksempler i den virkelige verden er tilføjelse af godkendelser, logning og kontekstegenskaber. Det er en teknik, der muliggør genanvendelighed på højeste niveau. Her er nogle eksempler på, hvordan du bruger det:

// 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

Du tror måske, at dette er avanceret funktionel programmering, og det er ikke relevant for frontend programmering. Men det er også nyttigt i applikationer med en enkelt side. For eksempel kan du tilføje adfærd til en React-komponent ved hjælp af komponenter af højere orden:

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

Afslutningsvis muliggør funktionssammensætning genanvendelighed af funktionalitet på et meget højt niveau. Hvis funktionerne er struktureret godt, giver det udviklere mulighed for at skabe ny adfærd baseret på eksisterende adfærd.

Det øger også læsbarheden af ​​implementeringer. I stedet for at indlejre funktioner kan du tydeligt kæde funktioner og oprette funktioner af højere orden med meningsfulde navne.