Eingehende Analyse des Funktions-Curryings in JavaScript_Javascript-Kenntnissen

Der Ursprung von Curry ist der Name des Mathematikers Haskell Curry (die Programmiersprache Haskell ist ebenfalls nach ihm benannt).

Currying wird normalerweise auch als partielle Auswertung bezeichnet. Dies bedeutet, dass Parameter schrittweise an eine Funktion übergeben werden, die Parameter nach jedem Durchgang teilweise angewendet werden und eine spezifischere Funktion zurückgegeben wird, um die verbleibenden Parameter zu akzeptieren. Dies kann auf mehreren Ebenen verschachtelt werden. Die Funktion akzeptiert einige Parameter, bis das Endergebnis zurückgegeben wird.

Daher ist der Currying-Prozess ein Prozess der schrittweisen Übergabe von Parametern, der schrittweisen Einengung des anwendbaren Funktionsbereichs und der schrittweisen Lösung des Problems.

Eine Summationsfunktion erstellen
Schauen wir uns gemäß der Schritt-für-Schritt-Bewertung ein einfaches Beispiel an

var concat3Words = function (a, b, c) { 
  return a+b+c; 
}; 
 
var concat3WordsCurrying = function(a) { 
  return function (b) { 
    return function (c) { 
      return a+b+c; 
    }; 
  }; 
}; 
console.log(concat3Words("foo ","bar ","baza"));      // foo bar baza 
console.log(concat3WordsCurrying("foo "));         // [Function] 
console.log(concat3WordsCurrying("foo ")("bar ")("baza")); // foo bar baza 

Wie Sie sehen können, ist concat3WordsCurrying("foo") eine Funktion. Jeder Aufruf gibt eine neue Funktion zurück, die einen weiteren Aufruf akzeptiert und dann eine neue Funktion zurückgibt, bis das Endergebnis zurückgegeben wird. (PS: Hier werden die Merkmale des Verschlusses verwendet)

Jetzt gehen wir noch einen Schritt weiter. Wenn mehr als 3 Parameter übergeben werden müssen, können wir so viele Parameter übergeben, wie wir möchten. Wenn keine Parameter übergeben werden, wird das Ergebnis ausgegeben.

Lassen Sie uns zunächst eine allgemeine Implementierung durchführen:

var add = function(items){ 
  return items.reduce(function(a,b){ 
    return a+b 
  }); 
}; 
console.log(add([1,2,3,4])); 

Aber wenn es erforderlich ist, jede Zahl mit 10 zu multiplizieren und dann zu addieren, dann:

var add = function (items,multi) { 
  return items.map(function (item) { 
    return item*multi; 
  }).reduce(function (a, b) { 
    return a + b 
  }); 
}; 
console.log(add([1, 2, 3, 4],10)); 

Glücklicherweise gibt es Map- und Reduce-Funktionen. Wenn wir diesem Modell folgen und nun zu jedem Element 1 hinzufügen und es dann zusammenfassen, müssen wir die Funktion in Map ersetzen.

Werfen wir einen Blick auf die Curry-Implementierung:

var adder = function () { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return _args.reduce(function (a, b) { 
        return a + b; 
      }); 
    } 
    [].push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
};   
var sum = adder(); 
 
console.log(sum);   // Function 
 
sum(100,200)(300);  // 调用形式灵活，一次调用可输入一个或者多个参数，并且支持链式调用 
sum(400); 
console.log(sum());  // 1000 （加总计算） 

Der obige Addierer ist eine Curry-Funktion. Er gibt eine neue Funktion zurück. Die neue Funktion kann neue Parameter stapelweise akzeptieren und die Berechnung bis zum letzten Mal verzögern.

Universelle Curry-Funktion

Das typischere Currying kapselt die letzte Berechnung in eine Funktion und übergibt diese Funktion dann als Parameter an die Currying-Funktion, was klar und flexibel ist.

Wenn beispielsweise jedes Element mit 10 multipliziert wird, können wir die Verarbeitungsfunktion als Parameter übergeben:

var currying = function (fn) { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return fn.apply(this, _args); 
    } 
    Array.prototype.push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
}; 
 
var multi=function () { 
  var total = 0; 
  for (var i = 0, c; c = arguments[i++];) { 
    total += c; 
  } 
  return total; 
}; 
 
var sum = currying(multi);  
  
sum(100,200)(300); 
sum(400); 
console.log(sum());   // 1000 （空白调用时才真正计算）

Auf diese Weise ist sum = currying(multi) der Aufruf sehr klar und der Verwendungseffekt ist auch brillant. Wenn Sie beispielsweise mehrere Werte akkumulieren möchten, können Sie mehrere Werte als Parameter sum( verwenden. 1,2,3), die auch unterstützt werden können Verkettete Aufrufe, sum(1)(2)(3)

Die Grundlagen des Currys

Der obige Code ist eigentlich eine Funktion höherer Ordnung. Eine Funktion höherer Ordnung bezieht sich auf eine Funktion, die eine oder mehrere Funktionen als Parameter empfängt und eine neue Funktion zurückgibt. Darüber hinaus stützt es sich auch auf die Eigenschaften von Verschlüssen, um die im Zwischenprozess eingegebenen Parameter zu speichern. Das heißt:

Funktionen können als Parameter
übergeben werden Funktionen können als Funktionsrückgabewerte
verwendet werden Schließung
Die Rolle des Currys
Verzögerte Berechnung. Das obige Beispiel ist relativ einfach zu erklären.

Parameterwiederverwendung. Wenn dieselbe Funktion mehrmals aufgerufen wird und die übergebenen Parameter größtenteils gleich sind, ist die Funktion möglicherweise ein guter Kandidat für Currying.

Funktionen dynamisch erstellen. Dies kann durch die dynamische Generierung neuer Funktionen zur Abwicklung nachfolgender Geschäfte nach teilweiser Berechnung der Ergebnisse erfolgen, wodurch wiederholte Berechnungen entfallen. Oder Sie können dynamisch eine neue Funktion erstellen, indem Sie eine Teilmenge der an die aufrufende Funktion zu übergebenden Parameter teilweise auf die Funktion anwenden. Diese neue Funktion speichert die Parameter, die wiederholt übergeben werden (Sie müssen sie nicht jedes Mal übergeben). in der Zukunft). Beispielsweise fügt der Ereignisbrowser eine Hilfsmethode für Ereignisse hinzu:

 var addEvent = function(el, type, fn, capture) { 
   if (window.addEventListener) { 
     el.addEventListener(type, function(e) { 
       fn.call(el, e); 
     }, capture); 
   } else if (window.attachEvent) { 
     el.attachEvent("on" + type, function(e) { 
       fn.call(el, e); 
     }); 
   } 
 }; 

Jedes Mal, wenn Sie eine Ereignisverarbeitung hinzufügen, müssen Sie if...else... ausführen. Tatsächlich ist in einem Browser nur eine Beurteilung erforderlich. Eine neue Funktion wird also dynamisch basierend auf dem Ergebnis einer Beurteilung generiert Eine Neuberechnung ist in Zukunft nicht mehr erforderlich.

var addEvent = (function(){ 
  if (window.addEventListener) { 
    return function(el, sType, fn, capture) { 
      el.addEventListener(sType, function(e) { 
        fn.call(el, e); 
      }, (capture)); 
    }; 
  } else if (window.attachEvent) { 
    return function(el, sType, fn, capture) { 
      el.attachEvent("on" + sType, function(e) { 
        fn.call(el, e); 
      }); 
    }; 
  } 
})(); 

In diesem Beispiel ist nach der ersten if...else...-Beurteilung ein Teil der Berechnung abgeschlossen und eine neue Funktion wird dynamisch erstellt, um die später übergebenen Parameter zu verarbeiten. Dies ist ein typisches Curry.

Die Function.prototype.bind-Methode ist ebenfalls eine Curry-Anwendung

Anders als bei der direkten Ausführung der Call/Apply-Methode legt die Bind-Methode den ersten Parameter als Kontext der Funktionsausführung fest, und die anderen Parameter werden der Reihe nach an die aufrufende Methode übergeben (der Hauptteil der Funktion selbst ist es nicht). ausgeführt und kann als verzögerte Ausführung betrachtet werden), und die dynamische Erstellung gibt eine neue Funktion zurück, die den Merkmalen des Curryings entspricht.

var foo = {x: 888}; 
var bar = function () { 
  console.log(this.x); 
}.bind(foo);        // 绑定 
bar();           // 888 

Das Folgende ist eine Simulation der Bindungsfunktion testBind, die eine neue Funktion erstellt und zurückgibt. In der neuen Funktion ist die Funktion, die das Geschäft tatsächlich ausführt, an den Kontext gebunden, der als tatsächlicher Parameter übergeben wird, und die Ausführung wird verzögert .

Function.prototype.testBind = function (scope) { 
  var fn = this;          //// this 指向的是调用 testBind 方法的一个函数， 
  return function () { 
    return fn.apply(scope); 
  } 
}; 
var testBindBar = bar.testBind(foo); // 绑定 foo，延迟执行 
console.log(testBindBar);       // Function (可见，bind之后返回的是一个延迟执行的新函数) 
testBindBar();            // 888 

Hier sollten wir auf das Verständnis dafür im Prototyp achten.

Der obige Artikel ist eine ausführliche Analyse des Funktions-Curryings in JavaScript. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.