Funktionale JavaScript-Programmierung (2)

Im vorherigen Artikel haben wir das Konzept der reinen Funktionen erwähnt. Die sogenannten reinen Funktionen sind: Für die gleiche Eingabe erhalten Sie immer die gleiche Ausgabe ohne erkennbare Nebenwirkungen. und hängt nicht vom Zustand der externen Umgebung ab (ich habe es träge kopiert).

Aber in der tatsächlichen Programmierung, insbesondere im Bereich der Front-End-Programmierung, ist die Bedingung, „sich nicht auf die externe Umgebung zu verlassen“, einfach unmöglich. Wir sind immer zwangsläufig Zuständen wie DOM und ausgesetzt AJAX. Etwas, das sich ständig ändert. Deshalb müssen wir leistungsfähigere Technologie einsetzen, um die Drecksarbeit zu erledigen.

1. Container, Funktor

Wenn Sie mit jQuery vertraut sind, sollten Sie dennoch bedenken, dass das von $(…) zurückgegebene Objekt kein natives DOM-Objekt ist. aber Für eine Art Kapselung nativer Objekte:

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

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

Dies ist gewissermaßen ein „Container“ (aber er ist nicht funktionsfähig).

Wie wir in der nächsten Klasse sehen werden, bieten Container eine äußerst leistungsstarke Hülle für gewöhnliche Variablen, Objekte und Funktionen in der funktionalen Programmierung und verleihen ihnen einige erstaunliche Funktionen, genau wie Tony Starks The Steel Coat, Dvas Mecha, ist das gleiche wie Asukas Einheit 2.

Lassen Sie uns den einfachsten Container schreiben:

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

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

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

Nachdem wir Container.of aufgerufen haben, um Dinge in den Container zu legen, wird aufgrund der Verstopfung dieser Schalenschicht die normale Funktion nicht mehr ausgeführt Für sie müssen wir daher eine Schnittstelle hinzufügen, damit externe Funktionen auch die Werte im Container beeinflussen können:

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

Wir können Verwende es so:

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

Das stimmt! Wir haben nur 7 Zeilen Code ausgegeben, um den coolen „Chained Call“ zu implementieren, der auch unser erster Functor ist.

Functor ist ein Containertyp, der eine Karte implementiert und einige spezifische Regeln befolgt.

Das heißt, wenn wir eine normale Funktion auf einen von einem Container umschlossenen Wert anwenden möchten, müssen wir hier zunächst einen Datentyp namens Functor definieren Datentyp Sie müssen definieren, wie map verwendet wird, um diese gewöhnliche Funktion anzuwenden.

Legen Sie Dinge in einen Container und lassen Sie nur eine Schnittstelle zuordnen zu Funktionen außerhalb des Containers. Welche Vorteile hat dies?

Im Wesentlichen ist Functor eine Abstraktion für Funktionsaufrufe. Wir geben dem Container die Möglichkeit, Funktionen selbst aufzurufen. Wenn wir eine Funktion zuordnen, lassen wir den Container die Funktion selbst ausführen, sodass der Container frei wählen kann, wann, wo und wie die Funktion ausgeführt werden soll, sodass eine verzögerte Auswertung, Fehlerbehandlung und asynchrone Aufrufe möglich sind usw. Ich warte auf sehr tolle Funktionen.

Zum Beispiel fügen wir der Funktion map jetzt eine Funktion zur Überprüfung auf Nullwerte hinzu. Wir nennen diesen neuen Container Maybe (der Prototyp stammt von 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)

Nachdem ich diese Codes gelesen habe, finde ich es ärgerlich, bei Kettenaufrufen immer eine Menge .map(...) eingeben zu müssen, oder? Dieses Problem lässt sich leicht lösen. Erinnern Sie sich an das in unserem vorherigen Artikel vorgestellte Curry?

Mit dem leistungsstarken Currying-Tool können wir so schreiben:

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. Fehlerbehandlung, entweder

Was unser Container jetzt kann. Zu wenig, es Wir können nicht einmal eine einfache Fehlerbehandlung durchführen. Jetzt können wir nur Fehler wie diesen behandeln:

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

Try/Catch/Throw ist nicht „rein“, weil es niemals unsere Funktion übernimmt und ihre Funktion verwirft Rückgabewert, wenn die Funktion fehlschlägt. Dies ist nicht das erwartete funktionale Verhalten.

Wenn Sie mit Promise vertraut sind, sollten Sie dennoch bedenken, dass Promise Catch aufrufen kann, um Fehler zentral zu behandeln:

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

Wir können den gleichen Vorgang auch für die funktionale Programmierung ausführen Wenn es richtig ist, wird das richtige Ergebnis zurückgegeben; wenn es falsch ist, wird ein Ergebnis zurückgegeben, das den Fehler beschreibt. Dieses Konzept wird in Haskell als Entweder-Klasse bezeichnet, und Left und Right sind seine beiden Unterklassen. Verwenden wir JS, um es zu implementieren:

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

Werfen wir einen Blick auf den Unterschied zwischen links und rechts:

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

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

Left und Right Der einzige Unterschied liegt in der Implementierung der map-Methode, Right.map verhält sich genauso wie die zuvor erwähnte Funktion map. Aber Left.map ist ganz anders: Es macht nichts mit dem Container, es nimmt den Container einfach rein und wirft ihn raus. Diese Funktion bedeutet, dass Left zur Übermittlung einer Fehlermeldung verwendet werden kann.

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!')

Ja, Links kann bei jeder Anrufkette Fehler in der machen Schleife werden sofort an das Ende der Aufrufkette zurückgegeben, was uns eine große Erleichterung bei der Fehlerbehandlung bringt. Wir müssen nicht mehr mehrere Schichten von Try/Catch durchlaufen.

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）！