Erweiterte Front-End-Grundlagen (8): Ausführliche Erläuterung des Currying von Funktionen

Currying ist eine relativ fortgeschrittene Funktionsanwendung und nicht leicht zu verstehen. Deshalb habe ich darüber nachgedacht, wie ich mich besser ausdrücken sollte, damit es für alle verständlicher ist. Nachdem ich lange darüber nachgedacht hatte, beschloss ich, das Konzept des Currys beiseite zu legen und zwei wichtige, aber leicht übersehene Wissenspunkte hinzuzufügen.

---

1. Implizite Konvertierung von Funktionen zur Ergänzung von Wissenspunkten

Als schwach typisierte Sprache ist die implizite Konvertierung von JavaScript sehr flexibel und interessant. Wenn wir kein tiefes Verständnis der impliziten Konvertierung haben, können wir durch die Ergebnisse einiger Operationen verwirrt sein, z. B. 4 + wahr = 5. Wenn Sie über ein tiefes Verständnis der impliziten Konvertierung verfügen, können Sie Ihre Fähigkeiten im Umgang mit js natürlich erheblich verbessern. Ich habe nur nicht vor, alle impliziten Konvertierungsregeln mit Ihnen zu teilen. Hier werde ich nur einige Regeln für die implizite Konvertierung von Funktionen teilen.

Stellen wir eine einfache Frage.

function fn() {
    return 20;
}
console.log(fn + 10); // 输出结果是多少？

Ändern Sie es leicht und überlegen Sie, wie das Ergebnis aussehen wird?

function fn() {
    return 20;
}
fn.toString = function() {
    return 10;
}
console.log(fn + 10);  // 输出结果是多少？

Sie können es weiterhin ändern.

function fn() {
    return 20;
}

fn.toString = function() {
    return 10;
}

fn.valueOf = function() {
    return 5;
}

console.log(fn + 10); // 输出结果是多少？

// 输出结果分别为
function fn() {
    return 20;
}10
20
15

Bei der Verwendung von console.log oder der Ausführung von Vorgängen kann es zu einer impliziten Konvertierung kommen. Aus den oben genannten drei Beispielen können wir einige Schlussfolgerungen zur impliziten Konvertierung von Funktionen ziehen.

Wenn wir toString und valueOf nicht neu definieren, ruft die implizite Konvertierung der Funktion die Standardmethode toString auf, die den Definitionsinhalt der Funktion als Zeichenfolge zurückgibt. Wenn wir die Methode toString/vauleOf aktiv definieren, wird das Rückgabeergebnis der impliziten Konvertierung von uns selbst gesteuert. Die Priorität von valueOf ist höher als die von toString.

Die Schlussfolgerung des obigen Beispiels ist also leicht zu verstehen. Ich schlage vor, dass Sie es versuchen.

---

2. Ergänzende Wissenspunkte: Die Kartenmethode zur Verwendung von Call/Apply zum Versiegeln des Arrays

map(): Führt die angegebene Funktion für jedes Element im Array aus und gibt ein Array zurück, das aus den Ergebnissen jedes Funktionsaufrufs besteht.

Laienhaft ausgedrückt bedeutet dies, jedes Element des Arrays zu durchlaufen, Berechnungen im ersten Parameter der Karte durchzuführen (Rückruffunktion) und das Berechnungsergebnis zurückzugeben. Gibt ein neues Array zurück, das aus allen Berechnungsergebnissen besteht.

// 回调函数中有三个参数
// 第一个参数表示newArr的每一项，第二个参数表示该项在数组中的索引值
// 第三个表示数组本身
// 除此之外，回调函数中的this，当map不存在第二参数时，this指向丢失，当存在第二个参数时，指向改参数所设定的对象
var newArr = [1, 2, 3, 4].map(function(item, i, arr) {
    console.log(item, i, arr, this);  // 可运行试试看
    return item + 1;  // 每一项加1
}, { a: 1 })

console.log(newArr); // [2, 3, 4, 5]

Die Details der Kartenmethode werden in den Kommentaren des obigen Beispiels erläutert. Jetzt müssen wir uns einem Problem stellen, nämlich der Kapselung der Karte.

Sie können zunächst über die for-Schleife nachdenken. Wir können eine for-Schleife verwenden, um eine Karte zu implementieren, aber beim Kapseln müssen wir einige Probleme berücksichtigen. Wenn wir eine for-Schleife verwenden, ist es zwar einfach, einen Schleifenprozess zu kapseln, aber es ist schwierig, ihn mit einer festen Sache für das zu kapseln, was wir für jedes Element in der for-Schleife tun müssen. Denn in jedem Szenario ist die Verarbeitung der Daten in der for-Schleife definitiv anders.

Jeder hat sich also eine gute Möglichkeit ausgedacht, diese verschiedenen Vorgänge mit einer separaten Funktion zu verarbeiten und diese Funktion zum ersten Parameter der Kartenmethode zu machen. Konkret: Was wird in dieser Rückruffunktion enthalten sein? wenn man es benutzt. Daher ist die auf dieser Idee basierende Kapselungsimplementierung wie folgt.

Array.prototype._map = function(fn, context) {
    var temp = [];
    if(typeof fn == 'function') {
        var k = 0;
        var len = this.length;
        // 封装for循环过程
        for(; k < len; k++) {
            // 将每一项的运算操作丢进fn里，利用call方法指定fn的this指向与具体参数
            temp.push(fn.call(context, this[k], k, this))
        }
    } else {
        console.error(&#39;TypeError: &#39;+ fn +&#39; is not a function.&#39;);
    }

    // 返回每一项运算结果组成的新数组
    return temp;
}

var newArr = [1, 2, 3, 4].map(function(item) {
    return item + 1;
})
// [2, 3, 4, 5]

Im obigen Paket habe ich zunächst ein leeres temporäres Array definiert, das zum Speichern des endgültigen Rückgabeergebnisses verwendet wird. In der for-Schleife wird bei jeder Schleife die Parameter-FN-Funktion ausgeführt und die Parameter von FN mithilfe der Aufrufmethode übergeben.

Nachdem wir den Kapselungsprozess von Map verstanden haben, können wir verstehen, warum wir bei der Verwendung von Map immer einen Rückgabewert in der ersten Rückruffunktion erwarten. Wenn wir in den Regeln von eslint bei der Verwendung von Map keinen Rückgabewert festlegen, wird dies als Fehler gewertet.

ok, da wir nun die impliziten Konvertierungsregeln von Funktionen und die Verwendung von „call/apply“ in diesem Szenario verstanden haben, können wir versuchen, Currying anhand eines einfachen Beispiels zu verstehen.

---

3. Currying von flach bis tief

Da ist eine weit verbreitete Interviewfrage zum Curry im Front-End-Interview.

Implementieren Sie eine Additionsmethode, damit das Berechnungsergebnis die folgenden Erwartungen erfüllen kann:

add(1)(2)(3) = 6
add(1, 2, 3)(4) = 10
add(1)(2)(3)(4)(5) = 15

Natürlich ist das Berechnungsergebnis die Summe aller Parameter bei jeder Additionsmethode Wenn es ausgeführt wird, wird es auf jeden Fall dieselbe Funktion zurückgeben und die Berechnung der verbleibenden Parameter fortsetzen.

Anhand der einfachsten Beispiele können wir Schritt für Schritt Lösungen finden.

Wenn wir es nur zweimal aufrufen, können wir es so kapseln.

function add(a) {
    return function(b) {
        return a + b;
    }
}

console.log(add(1)(2));  // 3

Wenn es nur dreimal aufgerufen wird:

function add(a) {
    return function(b) {
        return function (c) {
            return a + b + c;
        }
    }
}

console.log(add(1)(2)(3)); // 6

Das obige Paket ähnelt in etwa dem von uns gewünschten Ergebnis, aber die Verwendung von Parametern ist sehr eingeschränkt, also ist es so Für das Endergebnis, das wir wollen, brauchen wir keine universelle Kapselung. Was soll ich tun? Um die beiden oben genannten Beispiele zusammenzufassen: Wir nutzen tatsächlich die Eigenschaften von Abschlüssen, um alle Parameter in der schließlich zurückgegebenen Funktion zu konzentrieren, um die Ergebnisse zu berechnen und zurückzugeben. Daher besteht unser Hauptzweck bei der Kapselung darin, die Parameter für die Berechnung zu konzentrieren.

Werfen wir einen Blick auf die konkrete Umsetzung.

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = [].slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var adder = function () {
        var _adder = function() {
            [].push.apply(_args, [].slice.call(arguments));
            return _adder;
        };

        // 利用隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
        _adder.toString = function () {
            return _args.reduce(function (a, b) {
                return a + b;
            });
        }

        return _adder;
    }
    return adder.apply(null, [].slice.call(arguments));
}

// 输出结果，可自由组合的参数
console.log(add(1, 2, 3, 4, 5));  // 15
console.log(add(1, 2, 3, 4)(5));  // 15
console.log(add(1)(2)(3)(4)(5));  // 15

上面的实现，利用闭包的特性，主要目的是想通过一些巧妙的方法将所有的参数收集在一个数组里，并在最终隐式转换时将数组里的所有项加起来。因此我们在调用add方法的时候，参数就显得非常灵活。当然，也就很轻松的满足了我们的需求。

那么读懂了上面的demo，然后我们再来看看柯里化的定义，相信大家就会更加容易理解了。

柯里化（英语：Currying），又称为部分求值，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回一个新的函数的技术，新函数接受余下参数并返回运算结果。

1.接收单一参数，因为要携带不少信息，因此常常以回调函数的理由来解决。

2.将部分参数通过回调函数等方式传入函数中

3.返回一个新函数，用于处理所有的想要传入的参数

在上面的例子中，我们可以将add(1, 2, 3, 4)转换为add(1)(2)(3)(4)。这就是部分求值。每次传入的参数都只是我们想要传入的所有参数中的一部分。当然实际应用中，并不会常常这么复杂的去处理参数，很多时候也仅仅只是分成两部分而已。

咱们再来一起思考一个与柯里化相关的问题。

假如有一个计算要求，需要我们将数组里面的每一项用我们自己想要的字符给连起来。我们应该怎么做？想到使用join方法，就很简单。

var arr = [1, 2, 3, 4, 5];

// 实际开发中并不建议直接给Array扩展新的方法
// 只是用这种方式演示能够更加清晰一点
Array.prototype.merge = function(chars) {
    return this.join(chars);
}

var string = arr.merge('-')

console.log(string);  // 1-2-3-4-5

增加难度，将每一项加一个数后再连起来。那么这里就需要map来帮助我们对每一项进行特殊的运算处理，生成新的数组然后用字符连接起来了。实现如下：

var arr = [1, 2, 3, 4, 5];

Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item + number;
    }).join(chars);
}

var string = arr.merge('-', 1);

console.log(string); // 2-3-4-5-6

但是如果我们又想要让数组每一项都减去一个数组之后再连起来呢？当然和上面的加法操作一样的实现。

var arr = [1, 2, 3, 4, 5];

Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item - number;
    }).join(chars);
}

var string = arr.merge('~', 1);

console.log(string); // 0~1~2~3~4

机智的小伙伴肯定发现困惑所在了。我们期望封装一个函数，能同时处理不同的运算过程，但是我们并不能使用一个固定的套路将对每一项的操作都封装起来。于是问题就变成了和封装map的时候所面临的问题一样了。我们可以借助柯里化来搞定。

与map封装同样的道理，既然我们事先并不确定我们将要对每一项数据进行怎么样的处理，我只是知道我们需要将他们处理之后然后用字符连起来，所以不妨将处理内容保存在一个函数里。而仅仅固定封装连起来的这一部分需求。

于是我们就有了以下的封装。

// 封装很简单，一句话搞定
Array.prototype.merge = function(fn, chars) {
    return this.map(fn).join(chars);
}

var arr = [1, 2, 3, 4];

// 难点在于，在实际使用的时候，操作怎么来定义，利用闭包保存于传递num参数
var add = function(num) {
    return function(item) {
        return item + num;
    }
}

var red = function(num) {
    return function(item) {
        return item - num;
    }
}

// 每一项加2后合并
var res1 = arr.merge(add(2), '-');

// 每一项减2后合并
var res2 = arr.merge(red(1), '-');

// 也可以直接使用回调函数，每一项乘2后合并
var res3 = arr.merge((function(num) {
    return function(item) {
        return item * num
    }
})(2), '-')

console.log(res1); // 3-4-5-6
console.log(res2); // 0-1-2-3
console.log(res3); // 2-4-6-8

大家能从上面的例子，发现柯里化的特征吗？

---

四、柯里化通用式

通用的柯里化写法其实比我们上边封装的add方法要简单许多。   

var currying = function(fn) {
    var args = [].slice.call(arguments, 1);

    return function() {
        // 主要还是收集所有需要的参数到一个数组中，便于统一计算
        var _args = args.concat([].slice.call(arguments));
        return fn.apply(null, _args);
    }
}

var sum = currying(function() {
    var args = [].slice.call(arguments);
    return args.reduce(function(a, b) {
        return a + b;
    })
}, 10)

console.log(sum(20, 10));  // 40
console.log(sum(10, 5));   // 25

---

五、柯里化与bind

Object.prototype.bind = function(context) {
    var _this = this;
    var args = [].prototype.slice.call(arguments, 1);
    return function() {
        return _this.apply(context, args)
    }
}

这个例子利用call与apply的灵活运用，实现了bind的功能。

在前面的几个例子中，我们可以总结一下柯里化的特点：

1.接收单一参数，将更多的参数通过回调函数来搞定？

2.返回一个新函数，用于处理所有的想要传入的参数；

3.需要利用call/apply与arguments对象收集参数；

4.返回的这个函数正是用来处理收集起来的参数。

希望大家读完之后都能够大概明白柯里化的概念，如果想要熟练使用它，就需要我们掌握更多的实际经验才行。