자바스크립트 함수형 프로그래밍(2)

이전 기사에서 순수 함수의 개념에 대해 언급했습니다. 소위 순수 함수는 동일한 입력에 대해 눈에 띄는 부작용 없이 항상 동일한 출력을 얻습니다. , 외부 환경 상태에 의존하지 않습니다 (느리게 복사했습니다).

그러나 실제 프로그래밍, 특히 프론트엔드 프로그래밍 분야에서는 "외부 환경에 의존하지 않는다"는 조건은 도저히 불가능합니다. 우리는 항상 DOM과 같은 상태에 노출될 수밖에 없습니다. AJAX. 항상 바뀌는 것. 따라서 우리는 더러운 일을 수행하기 위해 더욱 강력한 기술을 사용해야 합니다.

1. 컨테이너, Functor

jQuery에 익숙하다면 $(…)에서 반환하는 개체가 기본 DOM 개체가 아니라는 점을 기억해야 합니다. 그러나 네이티브 객체를 일종의 캡슐화하는 경우:

var foo = $('#foo'); 
foo == document.getElementById('foo'); 
//=> false

foo[0] == document.getElementById('foo'); 
//=> true

이것은 어떤 의미에서 "컨테이너"입니다(그러나 기능적이지는 않습니다).

다음 수업에서 볼 수 있듯이 컨테이너는 함수형 프로그래밍에서 일반 변수, 객체 및 함수에 대해 매우 강력한 코팅을 제공하여 Tony Stark의 The steel coat, Dva의 메카, 아스카의 2호기와 동일합니다.

가장 간단한 컨테이너를 작성해 보겠습니다:

var Container = function(x) {
  this.__value = x;
}
Container.of = x => new Container(x);

//试试看
Container.of(1);
//=> Container(1)

Container.of('abcd');
//=> Container('abcd')

Container.of를 호출하여 컨테이너에 물건을 넣은 후에는 이 쉘 레이어의 방해로 인해 일반 기능이 더 이상 작동하지 않습니다. , 따라서 외부 함수가 컨테이너의 값에도 영향을 미칠 수 있도록 인터페이스를 추가해야 합니다.

Container.prototype.map = function(f){
  return Container.of(f(this.__value))
}

다음과 같이 사용할 수 있습니다. 그 :

으으으으으

맞아요! 우리는 첫 번째 Functor이기도 한 멋진 "Chained Call"을 구현하기 위해 단 7줄의 코드를 사용했습니다.

Functor는 맵을 구현하고 특정 규칙을 따르는 컨테이너 유형입니다.

즉, 컨테이너로 래핑된 값에 일반 함수를 적용하려면 먼저 이 데이터에 Functor라는 데이터 유형을 정의해야 합니다. type 이 일반적인 기능을 적용하려면 map을 어떻게 사용할지 정의해야 합니다.

컨테이너에 항목을 넣고 컨테이너 외부의 함수에 하나의 인터페이스 맵만 남겨두면 어떤 이점이 있나요?

기본적으로 Functor는 함수 호출을 추상화한 것입니다. 컨테이너에 자체적으로 함수를 호출할 수 있는 기능을 부여합니다. 함수를 맵할 때 컨테이너가 함수를 자체적으로 실행하도록 하여 컨테이너가 함수를 언제, 어디서, 어떻게 작동할지 자유롭게 선택할 수 있도록 함으로써 지연 평가, 오류 처리, 비동기 호출 기능을 갖습니다. 등 매우 멋진 기능을 기다리고 있습니다.

예를 들어 이제 map 함수에 null 값을 확인하는 기능을 추가합니다. 우리는 이 새 컨테이너를 Maybe라고 부릅니다. (프로토타입은 Haskell에서 나왔습니다. ) :

Container.of(3)
    .map(x => x + 1)                //=> Container(4)
    .map(x => 'Result is ' + x);    //=> Container('Result is 4')

이러한 코드를 읽고 나면 연쇄 호출에서 항상 .map(...)을 잔뜩 입력해야 한다는 사실이 짜증나죠? 이 문제는 해결하기 쉽습니다. 이전 기사에서 소개한 커링을 기억하시나요?

카링이라는 강력한 도구를 사용하면 다음과 같이 작성할 수 있습니다.

var Maybe = function(x) {
  this.__value = x;
}

Maybe.of = function(x) {
  return new Maybe(x);
}

Maybe.prototype.map = function(f) {
  return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
}

Maybe.prototype.isNothing = function() {
  return (this.__value === null || this.__value === undefined);
}

//试试看
import _ from 'lodash';
var add = _.curry(_.add);

Maybe.of({name: "Stark"})
    .map(_.prop("age"))
    .map(add(10));
//=> Maybe(null)

Maybe.of({name: "Stark", age: 21})
    .map(_.prop("age"))
    .map(add(10));
//=> Maybe(31)

2. 오류 처리, 둘 중 하나

이제 우리 컨테이너는 너무 적은 작업을 수행할 수 있습니다. 간단한 오류 처리도 수행할 수 없습니다. 이제 다음과 같은 오류만 처리할 수 있습니다.

import _ from 'lodash';
var compose = _.flowRight;
var add = _.curry(_.add);

// 创造一个柯里化的 map
var map = _.curry((f, functor) => functor.map(f));

var doEverything = map(compose(add(10), _.property("age")));

var functor = Maybe.of({name: "Stark", age: 21});
doEverything(functor);
//=> Maybe(31)

try/catch/throw는 외부 함수에서 인계받고 오류가 발생하면 반환 값을 버리기 때문에 "순수"하지 않습니다. 발생합니다. 이는 예상되는 기능적 동작이 아닙니다.

try{
    doSomething();
}catch(e){
    // 错误处理
}

왼쪽과 오른쪽의 차이점을 살펴보겠습니다.

doSomething()
    .then(async1)
    .then(async2)
    .catch(e => console.log(e));

Left

와

Right

의 유일한 차이점은 map 메소드의 구현입니다. 🎜>는 우리와 다릅니다. 앞서 언급한 map 기능과 같습니다. 하지만 Left.map은 매우 다릅니다. 컨테이너에 대해 아무 작업도 수행하지 않고 컨테이너를 집어넣고 버립니다. 이 기능은 Left를 사용하여 오류 메시지를 전달할 수 있음을 의미합니다.

// 这里是一样的=。=
var Left = function(x) {
  this.__value = x;
}
var Right = function(x) {
  this.__value = x;
}

// 这里也是一样的=。=
Left.of = function(x) {
  return new Left(x);
}
Right.of = function(x) {
  return new Right(x);
}

// 这里不同！！！
Left.prototype.map = function(f) {
  return this;
}
Right.prototype.map = function(f) {
  return Right.of(f(this.__value));
}

예,

Left

는 체인의 모든 링크를 호출할 수 있습니다. 오류는 다음과 같습니다. 호출 체인의 끝으로 즉시 반환되므로 오류 처리가 매우 편리해졌습니다. 더 이상

try/catch
계층을 거칠 필요가 없습니다.

Left 和 Right 是 Either 类的两个子类，事实上 Either 并不只是用来做错误处理的，它表示了逻辑或，范畴学里的 coproduct。但这些超出了我们的讨论范围。

三、IO

下面我们的程序要走出象牙塔，去接触外面“肮脏”的世界了，在这个世界里，很多事情都是有副作用的或者依赖于外部环境的，比如下面这样：

function readLocalStorage(){
    return window.localStorage;
}

这个函数显然不是纯函数，因为它强依赖外部的 window.localStorage 这个对象，它的返回值会随着环境的变化而变化。为了让它“纯”起来，我们可以把它包裹在一个函数内部，延迟执行它：

function readLocalStorage(){
    return function(){
        return window.localStorage;   
    }
}

这样 readLocalStorage 就变成了一个真正的纯函数！ OvO为机智的程序员鼓掌！

额……好吧……好像确实没什么卵用……我们只是（像大多数拖延症晚期患者那样）把讨厌做的事情暂时搁置了而已。为了能彻底解决这些讨厌的事情，我们需要一个叫 IO 的新的 Functor：

import _ from 'lodash';
var compose = _.flowRight;

var IO = function(f) {
    this.__value = f;
}

IO.of = x => new IO(_ => x);

IO.prototype.map = function(f) {
    return new IO(compose(f, this.__value))
};

IO 跟前面那几个 Functor 不同的地方在于，它的 __value 是一个函数。它把不纯的操作（比如 IO、网络请求、DOM）包裹到一个函数内，从而延迟这个操作的执行。所以我们认为，IO 包含的是被包裹的操作的返回值。

var io_document = new IO(_ => window.document);

io_document.map(function(doc){ return doc.title });
//=> IO(document.title)

注意我们这里虽然感觉上返回了一个实际的值 IO(document.title)，但事实上只是一个对象：{ __value: [Function] }，它并没有执行，而是简单地把我们想要的操作存了起来，只有当我们在真的需要这个值得时候，IO 才会真的开始求值，这个特性我们称之为『惰性求值』。（培提尔其乌斯：“这是怠惰啊！”）

是的，我们依然需要某种方法让 IO 开始求值，并且把它返回给我们。它可能因为 map 的调用链积累了很多很多不纯的操作，一旦开始求值，就可能会把本来很干净的程序给“弄脏”。但是去直接执行这些“脏”操作不同，我们把这些不纯的操作带来的复杂性和不可维护性推到了 IO 的调用者身上（嗯就是这么不负责任）。

下面我们来做稍微复杂点的事情，编写一个函数，从当前 url 中解析出对应的参数。

import _ from 'lodash';

// 先来几个基础函数：
// 字符串
var split = _.curry((char, str) => str.split(char));
// 数组
var first = arr => arr[0];
var last = arr => arr[arr.length - 1];
var filter = _.curry((f, arr) => arr.filter(f));
//注意这里的 x 既可以是数组，也可以是 functor
var map = _.curry((f, x) => x.map(f)); 
// 判断
var eq = _.curry((x, y) => x == y);
// 结合
var compose = _.flowRight;

var toPairs = compose(map(split('=')), split('&'));
// toPairs('a=1&b=2')
//=> [['a', '1'], ['b', '2']]

var params = compose(toPairs, last, split('?'));
// params('http://xxx.com?a=1&b=2')
//=> [['a', '1'], ['b', '2']]

// 这里会有些难懂=。= 慢慢看
// 1.首先，getParam是一个接受IO(url)，返回一个新的接受 key 的函数；
// 2.我们先对 url 调用 params 函数，得到类似[['a', '1'], ['b', '2']]
//   这样的数组；
// 3.然后调用 filter(compose(eq(key), first))，这是一个过滤器，过滤的
//   条件是 compose(eq(key), first) 为真，它的意思就是只留下首项为 key
//   的数组；
// 4.最后调用 Maybe.of，把它包装起来。
// 5.这一系列的调用是针对 IO 的，所以我们用 map 把这些调用封装起来。
var getParam = url => key => map(compose(Maybe.of, filter(compose(eq(key), first)), params))(url);

// 创建充满了洪荒之力的 IO！！！
var url = new IO(_ => window.location.href);
// 最终的调用函数！！！
var findParam = getParam(url);

// 上面的代码都是很干净的纯函数，下面我们来对它求值，求值的过程是非纯的。
// 假设现在的 url 是 http://www.php.cn/
// 调用 __value() 来运行它！
findParam("a").__value();
//=> Maybe(['a', '1'])

四、总结

如果你还能坚持看到这里的话，不管看没看懂，已经是勇士了。在这篇文章里，我们先后提到了 Maybe、Either、IO 这三种强大的 Functor，在链式调用、惰性求值、错误捕获、输入输出中都发挥着巨大的作用。事实上 Functor 远不止这三种，但由于篇幅的问题就不再继续介绍了（哼才不告诉你其实是因为我还没看懂其它 Functor 的原理）

但依然有问题困扰着我们：

1. 如何处理嵌套的 Functor 呢？（比如 Maybe(IO(42))）

2. 如何处理一个由非纯的或者异步的操作序列呢？

在这个充满了容器和 Functor 的世界里，我们手上的工具还不够多，函数式编程的学习还远远没有结束，在下一篇文章里会讲到 Monad 这个神奇的东西（然而我也不知道啥时候写下一篇，估计等到实习考核后吧OvO）。

以上就是JavaScript函数式编程（二）的内容，更多相关内容请关注PHP中文网（www.php.cn）！