Programmation fonctionnelle JavaScript (2)

Dans l'article précédent, nous avons évoqué le concept de fonctions pures. Les fonctions dites pures sont, Pour la même entrée, vous obtiendrez toujours la même sortie sans aucun effet secondaire observable. , et ne dépend pas de l'état de l'environnement extérieur (je l'ai copié paresseusement).

Mais dans la programmation réelle, en particulier dans le domaine de la programmation front-end, la condition de « ne pas s'appuyer sur l'environnement externe » est tout simplement impossible. Nous sommes toujours inévitablement exposés à des états tels que DOM et. AJAX. Quelque chose qui change tout le temps. Nous devons donc utiliser une technologie plus puissante pour faire le sale boulot.

1. Conteneur, Functor

Si vous connaissez jQuery, vous devez quand même vous rappeler que l'objet renvoyé par $(…) n'est pas un objet DOM natif, mais Pour une sorte d'encapsulation d'objets natifs :

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

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

C'est un "conteneur" en un sens (mais il n'est pas fonctionnel).

Comme nous le verrons dans le prochain cours, les conteneurs fournissent un revêtement extrêmement puissant pour les variables, objets et fonctions ordinaires dans la programmation fonctionnelle, leur donnant des fonctionnalités étonnantes, tout comme The steel coat de Tony Stark, le mecha de Dva, est le même que l'unité 2 d'Asuka.

Écrivons le conteneur le plus simple :

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

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

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

Après avoir appelé Container.of pour mettre des choses dans le conteneur, en raison de l'obstruction de cette couche de coque, ordinaire La fonction ne fonctionne plus pour eux, nous devons donc ajouter une interface pour permettre aux fonctions externes d'affecter également les valeurs​​dans le conteneur :

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

Nous pouvons utilisez-le comme ceci :

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

C'est vrai ! Nous n'avons dépensé que 7 lignes de code pour implémenter le cool "Chained Call", qui est aussi notre premier Functor.

Functor est un type de conteneur qui implémente map et obéit à certaines règles spécifiques.

En d'autres termes, si nous voulons appliquer une fonction normale à une valeur enveloppée par un conteneur, alors nous devons d'abord définir un type de données appelé Functor dans ces données. type Vous devez définir comment utiliser map pour appliquer cette fonction ordinaire.

Mettez les choses dans un conteneur et ne laissez qu'une seule interface map vers les fonctions en dehors du conteneur. Quels sont les avantages de faire cela ?

Essentiellement, Functor est une abstraction pour l'appel de fonctions. Nous donnons au conteneur la possibilité d'appeler des fonctions par lui-même. Lorsque map une fonction, nous laissons le conteneur exécuter la fonction par lui-même, afin que le conteneur puisse choisir librement quand, où et comment faire fonctionner la fonction, afin qu'elle ait une évaluation paresseuse, une gestion des erreurs, des appels asynchrones , etc. En attente de fonctionnalités très impressionnantes.

Par exemple, nous ajoutons maintenant une fonctionnalité pour vérifier les valeurs nulles à la fonction map Nous appelons ce nouveau conteneur Peut-être (le prototype vient de Haskell. ) :

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)

Après avoir lu ces codes, je trouve ça ennuyeux de devoir toujours saisir un tas de .map(…) dans les appels en chaîne, non ? Ce problème est facile à résoudre. Vous souvenez-vous du curry présenté dans notre article précédent ?

Avec le puissant outil de curry, on peut écrire ainsi :

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)

2. Gestion des erreurs, Soit

Ce que notre conteneur peut faire maintenant Trop peu, c'est nous ne pouvons même pas faire de gestion simple des erreurs. Maintenant, nous ne pouvons gérer que des erreurs comme celle-ci :

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

try/catch/throw n'est pas "pur" car il ne prend jamais en charge notre fonction et la jette. valeur de retour si la fonction échoue. Ce n'est pas le comportement fonctionnel attendu.

Si vous connaissez Promise, n'oubliez pas que Promise peut appeler catch pour gérer les erreurs de manière centralisée :

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

Nous pouvons également effectuer la même opération pour la programmation fonctionnelle si nous exécutons. Si c'est correct, le résultat correct est renvoyé ; s'il est incorrect, un résultat décrivant l'erreur est renvoyé. Ce concept est appelé classe Soit en Haskell, et Left et Right sont ses deux sous-classes. Utilisons JS pour l'implémenter :

// 这里是一样的=。=
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));
}

Jetons un coup d'œil à la différence entre gauche et droite :

Right.of("Hello").map(str => str + " World!");
// Right("Hello World!")

Left.of("Hello").map(str => str + " World!");
// Left("Hello")

Gauche et Droite La seule différence réside dans l'implémentation de la méthode map, Right.map se comporte de la même manière que la fonction map que nous avons mentionnée plus tôt. Mais Left.map est très différent : il ne fait rien avec le conteneur, il prend simplement le conteneur et le jette. Cette fonctionnalité signifie que Left peut être utilisé pour délivrer un message d'erreur.

var getAge = user => user.age ? Right.of(user.age) : Left.of("ERROR!");

//试试
getAge({name: 'stark', age: '21'}).map(age => 'Age is ' + age);
//=> Right('Age is 21')

getAge({name: 'stark'}).map(age => 'Age is ' + age);
//=> Left('ERROR!')

Oui, Gauche peut effectuer n'importe quelle chaîne d'appel. Erreurs dans le sont immédiatement renvoyées à la fin de la chaîne d'appel, ce qui apporte une grande commodité à notre gestion des erreurs. Nous n'avons plus besoin de passer par des couches de 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）！