67 lines
3.8 KiB
Markdown
67 lines
3.8 KiB
Markdown
---
|
||
title: Function Composition
|
||
localeTitle: Состав функции
|
||
---
|
||
## Состав функции
|
||
|
||
Состав функции - это поточечное применение одной функции к результату другого. Разработчики делают это в ручном режиме каждый день, когда гнездо функционирует:
|
||
|
||
```javascript
|
||
compose = (fn1, fn2) => value => fn2(fn1(value))
|
||
```
|
||
|
||
Но это трудно читать. Существует лучший способ использования композиции функций. Вместо того, чтобы читать их изнутри:
|
||
|
||
```javascript
|
||
add2AndSquare = (n) => square(add2(n))
|
||
```
|
||
|
||
Мы можем использовать функцию более высокого порядка, чтобы упорядочить их упорядоченно.
|
||
|
||
```javascript
|
||
add2AndSquare = compose( add2, square)
|
||
```
|
||
|
||
Простая реализация компоновки будет заключаться в следующем:
|
||
|
||
```javascript
|
||
compose = (f1, f2) => value => f2( f1(value) );
|
||
```
|
||
|
||
Чтобы получить еще большую гибкость, мы можем использовать функцию reduceRight:
|
||
|
||
```javascript
|
||
compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);
|
||
```
|
||
|
||
Чтение композиции слева направо позволяет четко связывать функции более высокого порядка. В реальных примерах мира добавляются аутентификации, журналирование и свойства контекста. Это метод, который позволяет повторно использовать на самом высоком уровне. Вот несколько примеров использования:
|
||
|
||
```javascript
|
||
// 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
|
||
```
|
||
|
||
Вы можете подумать, что это расширенное функциональное программирование, и это не относится к программированию интерфейса. Но это также полезно в приложениях с одной страницей. Например, вы можете добавить поведение к компоненту React, используя компоненты более высокого порядка:
|
||
|
||
```javascript
|
||
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);
|
||
```
|
||
|
||
В заключение функциональный состав обеспечивает возможность повторного использования функциональности на очень высоком уровне. Если функции хорошо структурированы, это позволяет разработчикам создавать новое поведение на основе существующего поведения.
|
||
|
||
Это также повышает читаемость реализаций. Вместо функций вложенности вы можете очищать функции цепочки и создавать функции более высокого порядка со значимыми именами. |