Javascript ist Ihre Javascript-Kenntnisse für Funktionen höherer Ordnung (erweiterte Anwendung).

In üblichen Programmiersprachen können die Parameter einer Funktion nur Basistypen oder Objektreferenzen sein, und der Rückgabewert kann nur Basisdatentypen oder Objektreferenzen sein. Aber in Javascript sind Funktionen erstklassige Bürger und können als Parameter übergeben oder als Rückgabewerte zurückgegeben werden. Die sogenannte Funktion höherer Ordnung ist eine Funktion, die eine Funktion als Parameter oder eine Funktion als Rückgabewert annehmen kann. Diese beiden Situationen haben in der tatsächlichen Entwicklung viele Anwendungsszenarien. Dieser Artikel ist eine Zusammenfassung mehrerer Anwendungsszenarien, denen ich bei der Arbeit und im Studium begegnet bin.

Rückruffunktion

Die Wiederverwendung von Code ist eines der wichtigen Kriterien für die Messung einer Anwendung. Durch Extrahieren der geänderten Geschäftslogik und Einkapseln in die Rückruffunktion kann die Code-Wiederverwendungsrate effektiv verbessert werden. Beispielsweise durchläuft die zu Arrays in ES5 hinzugefügte forEach-Methode das Array und ruft für jedes Element dieselbe Funktion auf.

array = {};
array.forEach = function(arr, fn){
  for (var i = 0, len = arr.length; i < len; i++) {
    fn(arr[i], i, arr);
  }
}

Konzentrieren Sie den Geschäftsfokus auf die Rückruffunktion, ohne den Traversalcode jedes Mal erneut schreiben zu müssen.

　Teilfunktion

Als typische Anwendung der Ausgabe einer Funktion als Rückgabewert handelt es sich um eine Teilfunktion. Die sogenannte Teilfunktion bezieht sich auf die Verwendung zum Erstellen einer Funktion, die einen anderen Teil aufruft – eine Funktion, deren Parameter oder Variablen voreingestellt wurden. Wie dem auch sei, wenn ich mir die Definition ansehe, verstehe ich nicht, wofür dieses Zeug gedacht ist. Schauen wir uns zunächst Beispiele an. Das typischste Beispiel für Teilfunktionen ist die Typbeurteilung.

Javascript-Objekte haben drei Attribute: Prototypattribute, Klassenattribute und Erweiterbarkeit. (Schüler, die es nicht wissen, sollten noch einmal das Rhino-Buch lesen, Seite: 138) Das Klassenattribut ist ein String, der in Javascript nicht direkt bereitgestellt wird, aber wir können Object.prototype.toString verwenden, um ihn indirekt abzurufen. Diese Funktion gibt immer die folgende Form zurück:

[Objektklasse]　

Damit wir eine Reihe von isType-Funktionen schreiben können.

Der Code lautet wie folgt:

isString = function(obj){
  return Object.prototype.toString.call(obj) === "[object String]";
}
isNumber = function(obj){
  return Object.prototype.toString.call(obj) === "[object Number]";
}
isArray = function(obj){
  return Object.prototype.toString.call(obj) === "[object Array]";
}

Die meisten Codes in diesen Funktionen werden wiederholt. Zu diesem Zeitpunkt feiern Funktionen höherer Ordnung ein großartiges Debüt:

isType = function(type) {
  return function(obj) {
    return Object.prototype.toString.call(obj) === "[object " + type + "]";
  }
}

isString = isType('String');
isNumber = isType('Number');
isArray = isType('Array');

Die Form der Rückgabe einer neuen benutzerdefinierten Funktion durch Angabe einiger Parameter ist also eine Teilfunktion.

Curry

Currying wird auch Teilbewertung genannt. Eine Currying-Funktion akzeptiert zunächst einige Parameter. Nach dem Akzeptieren dieser Parameter wird die Funktion nicht sofort ausgewertet, sondern weiterhin eine andere Funktion zurückgeben. Die gerade übergebenen Parameter werden im von der Funktion gebildeten Abschluss gespeichert. Wenn die Funktion tatsächlich ausgewertet wird, werden alle übergebenen Parameter auf einmal zur Auswertung verwendet.

var currying = function(fn) {
  var args = [];
  
  return function() {
    if (arguments.length === 0) {
      return fn.applay(this, args);
    } else {
      args = args.concat(arguments);
      return arguments.callee;
    }
  }
}

Nehmen wir als Beispiel die Berechnung der täglichen Ausgaben für einen Monat:

var currying = function(fn) {
debugger;
  var args = [];
  
  return function() {
    if (arguments.length === 0) {
      return fn.apply(this, args);
    } else {
      Array.prototype.push.apply(args, arguments);
      return arguments.callee;
    }
  }
}

cost = function(){
  var sum = 0;
  for (var i = 0, len = arguments.length; i < len; i++) {
    sum += arguments[i];
  }
  
  return sum;
}
var cost = currying(cost);

cost(100);
cost(200);
alert(cost())

Ereignisdrosselung

In einigen Szenarien können bestimmte Ereignisse wiederholt ausgelöst werden, die Ereignisverarbeitungsfunktion muss jedoch nicht jedes Mal ausgeführt werden. Beispielsweise werden komplexe logische Berechnungen im window.resize-Ereignis durchgeführt. Wenn der Benutzer häufig die Browsergröße ändert, müssen diese logischen Berechnungen manchmal nicht jedes Mal ausgelöst werden, wenn eine Größenänderung erfolgt Es sind nur begrenzte Berechnungen erforderlich. Ein paar Mal reichen aus. Zu diesem Zeitpunkt müssen wir einige Ereignisanfragen basierend auf dem Zeitraum ignorieren. Schauen Sie sich die folgende Drosselungsfunktion an:

function throttle(fn, interval) {
   var doing = false;

   return function() {
    if (doing) {
     return;
    }
    doing = true;
    fn.apply(this, arguments);
    setTimeout(function() {
     doing = false;
    }, interval);
   }
  }
  
  window.onresize = throttle(function(){
    console.log('execute');
  }, 500);

Durch die Steuerung der Funktionsausführungszeit können Sie ein perfektes Gleichgewicht zwischen der Anzahl der Funktionsausführungen und den Funktionsanforderungen erreichen. Ein weiteres Ereignis ist Mousemove. Wenn wir dieses Ereignis an ein DOM-Element binden, wird das Ereignis wiederholt ausgelöst, wenn die Maus über das Element bewegt wird.

Die Veranstaltung ist beendet

Bei einigen Ereignissen, die häufig ausgelöst werden können, möchten wir manchmal nach Ende des Ereignisses eine Reihe von Vorgängen ausführen. Zu diesem Zeitpunkt können wir Funktionen höherer Ordnung verwenden, um die folgende Verarbeitung durchzuführen:

function debounce(fn, interval) {
  var timer = null;

 function delay() {
  var target = this;
  var args = arguments;
  return setTimeout(function(){
   fn.apply(target, args);
  }, interval);
 }

 return function() {
  if (timer) {
   clearTimeout(timer);
  }

  timer = delay.apply(this, arguments);
 }
};
window.onresize = throttle(function(){
  console.log('resize end');
}, 500);

Wenn das Ereignis während dieses Vorgangs ausgelöst wird, löschen Sie das letzte Ereignishandle und binden Sie die Ausführungszeit neu.

Referenz:

《Ausführliche Erklärung des Knotens》

"Javascript-Designmuster und Entwicklungspraktiken"