Ausführliche Erläuterung verschiedener Ausleihmethoden in JavaScript (grafisches Tutorial)

Werfen wir einen Blick auf eine detaillierte Einführung in die Borrowing-Methoden in JavaScript. Hinweis: In diesem Artikel wird davon ausgegangen, dass Sie die relevanten Kenntnisse über die Verwendung von call(), apply() und bind() und die Unterschiede zwischen ihnen beherrschen Dieser Artikel kann Sie über die Ausleihmethoden in JavaScript informieren.

Vorwort

Durch die Methoden call(), apply() und bind() können wir problemlos Methoden von anderen Objekten ausleihen, ohne sie von diesen Objekten zu erben.

Ausleihen von Methoden in JavaScript

In JavaScript können Sie manchmal Funktionen oder Methoden anderer Objekte wiederverwenden, die nicht unbedingt auf dem Objekt selbst oder auf dem Objekt selbst definiert sein müssen sein Prototyp. Über die Methoden call(), apply() und bind() können wir problemlos Methoden von anderen Objekten ausleihen, ohne diese Objekte zu erben. Dies ist ein gängiger Ansatz, der von professionellen JavaScript-Entwicklern verwendet wird.

Prototypmethode

In JavaScript sind mit Ausnahme unveränderlicher primitiver Datentypen wie Zeichenfolge, Zahl und Boolescher Wert fast alle Daten ein Objekt. Array ist ein Objekt, das zum Durchlaufen und Konvertieren geordneter Sequenzen geeignet ist. Sein Prototyp verfügt über nützliche Methoden wie Slice, Join, Push und Pop.

Ein häufiges Beispiel ist, dass, wenn das Objekt und das Array beide Datenstrukturen vom Listentyp sind, das Objekt Methoden aus dem Array „ausleihen“ kann. Die am häufigsten verwendete Methode ist Array.prototype.slice.

function myFunc() {
 
  // error, arguments is an array like object, not a real array
  arguments.sort();
 
  // "borrow" the Array method slice from its prototype, which takes an array like object (key:value)
  // and returns a real array
  var args = Array.prototype.slice.call(arguments);
 
  // args is now a real Array, so can use the sort() method from Array
  args.sort();
 
}
 
myFunc('bananas', 'cherries', 'apples');

Das Ausleihen von Methoden funktioniert, weil die Call- und Apply-Methoden den Aufruf von Funktionen in verschiedenen Kontexten ermöglichen, wodurch auch vorhandene Funktionen wiederverwendet werden, ohne von anderen Objekten erben zu müssen. Ein guter Weg. Tatsächlich definieren Arrays viele gängige Methoden im Prototyp, wie zum Beispiel Join und Filter:

// takes a string "abc" and produces "a|b|c
Array.prototype.join.call('abc', '|');
 
// takes a string and removes all non vowels
Array.prototype.filter.call('abcdefghijk', function(val) {
  return ['a', 'e', 'i', 'o', 'u'].indexOf(val) !== -1;
}).join('');

Es ist ersichtlich, dass nicht nur Objekte Methoden von Arrays ausleihen können , Strings funktionieren auch. Da jedoch im Prototyp generische Methoden definiert sind, müssen Sie jedes Mal String.prototype oder Array.prototype verwenden, wenn Sie eine Methode ausleihen möchten. Auf diese Weise zu schreiben ist wortreich und kann schnell langweilig werden. Eine effizientere Möglichkeit besteht darin, Literale zu verwenden, um denselben Zweck zu erreichen.

Verwenden Sie die Literal-Ausleihmethode

Literal ist eine Syntaxstruktur, die den JavaScript-Regeln folgt:

In JavaScript können Werte mithilfe von Literalen dargestellt werden. Sie sind feste Werte, entweder Variablen oder werden im Skript wörtlich angegeben.
Literale können zu Prototypmethoden abgekürzt werden:

[].slice.call(arguments);
[].join.call('abc', '|');
''.toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

Das sieht weniger ausführlich aus, aber Sie müssen direkt mit [] und „“ arbeiten, um die Methode auszuleihen. immer noch etwas hässlich. Sie können Variablen verwenden, um Verweise auf Literale und Methoden zu speichern, was das Schreiben erleichtert:

var slice = [].slice;
slice.call(arguments);
var join = [].join;
join.call('abc', '|');
 
var toUpperCase = ''.toUpperCase;
toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

Mit Verweisen auf geliehene Methoden können wir leicht call( verwenden) ), um es aufzurufen, damit Sie Code wiederverwenden können. Schauen wir uns im Einklang mit dem Prinzip der Redundanzreduzierung an, ob wir eine Methode ausleihen können, ohne bei jedem Aufruf call() oder apply() schreiben zu müssen:

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice(arguments);
 
var join = Function.prototype.call.bind(Array.prototype.join);
join('abc', '|');
 
var toUpperCase = Function.prototype.call.bind(String.prototype.toUpperCase);
toUpperCase(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

Wie Sie sehen, können Sie mit Function.prototype.call.bind nun „geliehene“ Methoden aus verschiedenen Prototypen statisch binden. Aber var slice = Function.prototype.call.bind(Array.prototype.slice) wie funktioniert dieser Satz eigentlich?

Funktion.prototype.call.bind verstehen

Function.prototype.call.bind Es mag auf den ersten Blick kompliziert erscheinen, aber zu verstehen, wie es funktioniert, kann sehr nützlich sein.

Function.prototype.call ist eine Referenz, die eine Funktion „aufruft“ und ihren „diesen“ Wert zur Verwendung innerhalb der Funktion festlegt.
Beachten Sie, dass „bind“ eine neue Funktion mit ihrem „this“-Wert zurückgibt. Daher ist .bind(Array.prototype.slice) das „dies“ der neuen zurückgegebenen Funktion immer die Funktion Array.prototype.slice.

Zusammenfassend lässt sich sagen: Die neue Funktion ruft die Funktion „call“ auf und ihr „this“ ist die „slice“-Funktion. Der Aufruf von Slice() zeigt auf die zuvor qualifizierte Methode.

Methoden benutzerdefinierter Objekte

Vererbung ist großartig, aber Entwickler möchten normalerweise einige Objekte oder Module wiederverwenden, die nur für allgemeine Zwecke verwendet werden Funktionen. Es besteht keine Notwendigkeit, Vererbung nur für die Wiederverwendung von Code zu verwenden, da das einfache Ausleihen von Methoden in den meisten Fällen kompliziert ist.

Wir haben bisher nur über das Ausleihen nativer Methoden gesprochen, aber das Ausleihen jeder beliebigen Methode ist möglich. Beispielsweise kann der folgende Code die Spielerpunktzahl des Punktespiels berechnen:

var scoreCalculator = {
  getSum: function(results) {
    var score = 0;
    for (var i = 0, len = results.length; i < len; i++) {
      score = score + results[i];
    }
    return score;
  },
  getScore: function() {
    return scoreCalculator.getSum(this.results) / this.handicap;
  }
};
var player1 = {
  results: [69, 50, 76],
  handicap: 8
};
 
var player2 = {
  results: [23, 4, 58],
  handicap: 5
};
 
var score = Function.prototype.call.bind(scoreCalculator.getScore);
 
// Score: 24.375
console.log(&#39;Score: &#39; + score(player1));
 
// Score: 17
console.log(&#39;Score: &#39; + score(player2));

Obwohl das obige Beispiel sehr dürftig ist, ist es einfach zu erkennen Wie die native Methode können auch die benutzerdefinierten Methoden problemlos ausgeliehen werden.

Zusammenfassung

Aufrufen, Binden und Anwenden können die Art und Weise ändern, wie eine Funktion aufgerufen wird, und werden häufig beim Ausleihen von Funktionen verwendet. Die meisten Entwickler sind mit dem Ausleihen nativer Methoden vertraut, leihen sich jedoch seltener benutzerdefinierte Methoden aus.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Sprechen Sie ausführlich über die Eigenschaften und Methoden des integrierten Objekts Math in js (auf einen Blick klar)

String-Methode mit JavaScript zur Implementierung des Mustervergleichs

Javascript diese ausführliche Erklärung (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung verschiedener Ausleihmethoden in JavaScript (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!