Detaillierte Erläuterung der Apply- und Call-Funktionen in JavaScript_jquery

Als ich zum ersten Mal einen Fachartikel übersetzt habe, war es urkomisch!

Originalübersetzung:

Function.apply und Function.call in JavaScript

Der erste Absatz wird weggelassen.

Jede JavaScript-Funktion verfügt über viele angehängte Methoden, einschließlich toString(), call() und apply(). Für Sie mag es seltsam klingen, dass eine Funktion ihre eigenen Methoden haben könnte, aber denken Sie daran, dass jede Funktion in JavaScript ein Objekt ist. Schauen Sie sich diesen Artikel an, um die JavaScript-Funktionen (auffrischend) zu überprüfen. Möglicherweise möchten Sie auch den Unterschied zwischen Funktionen und Methoden in JavaScript kennen. Ich denke, die Beschreibungen von „Funktion“ und „Methode“ sind nur JavaScript-Konventionen. Funktionen stehen für sich allein (zum Beispiel: alarm()) und Methoden sind Eigenschaften (Wörterbuch) eines Objekts innerhalb der Funktion. Wir rufen Methoden über das Objekt auf. Jedes JavaScript-Objekt verfügt über eine toString()-Methode. Das Folgende ist ein Beispiel für Code. In einem Funktionsobjekt können wir die toString()-Methode verwenden.

function foo(){
 alert('x');
}
alert(foo.toString());

Da Funktionen Objekte sind, haben sie ihre eigenen Eigenschaften und Methoden. Wir können sie uns als Daten vorstellen. In diesem Artikel konzentrieren wir uns nur auf die beiden Funktionsmethoden apply() und call().

Wir beginnen mit dem folgenden Code:

var x = 10;
function f(){
 alert(this.x);
}
f();

Wir definieren eine globale Funktion f(). f() greift über das Schlüsselwort this auf die Variable x zu, es ist jedoch zu beachten, dass wir diese Funktion nicht über eine Instanz eines Objekts aufrufen können. Auf welches Objekt deutet dies hin? Dies zeigt auf dieses globale Objekt. Unsere Variable x ist in diesem globalen Objekt definiert. Der obige Code kann normal ausgeführt werden und das Ergebnis ist ein Dialogfeld, in dem 10 angezeigt wird.

Dadurch können wir call() und apply() aufrufen. Wie das folgende Beispiel zeigt, wie man call() verwendet:

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

Wenn Sie zuerst f() aufrufen, wird das Dialogfeld 10 angezeigt, da dieses zu diesem Zeitpunkt auf das globale Objekt zeigt. Dann rufen wir die Methode call() der Funktion f auf. Der eingehende Parameter ist o und das laufende Ergebnis zeigt den Wert des x-Attributs in o, 15. Die call()-Methode verwendet ihren ersten Parameter als this-Zeiger der f-Funktion. Mit anderen Worten: Wir teilen der Laufzeit mit, auf welches Objekt dies in der f-Funktion zeigt.

Dieser Sprung klingt ein bisschen komisch, für C-, Java- und C#-Programmierer sogar etwas ungewöhnlich. Dies sind die unterhaltsamen Teile von ECMAScript.

Sie können der Funktion auch Parameter über call() übergeben:

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

apply() ähnelt call(), außer dass apply() erfordert, dass der zweite Parameter ein Array sein muss. Dieses Array wird als Parameter an die Zielfunktion übergeben.

var x = 10;
var o = {x : 15};
function f(message) {
 alert(message);
 alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);

Die Methode apply() ist nützlich, da wir eine Funktion erstellen können, ohne uns um die Parameter der Zielmethode zu kümmern. Diese Funktion kann über den zweiten Array-Parameter von apply() zusätzliche Parameter an die Methode übergeben.

var o = {x : 15};
function f1(message1) {
 alert(message1 + this.x);
}
function f2(message1, message2) {
 alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
 func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);

Mit dieser Syntax stimmt etwas nicht. Um die Methode apply() aufzurufen, zwingen wir die Zielfunktion, die Parameter im Array zu verwenden. Glücklicherweise gibt es eine Möglichkeit, diese Syntax zu vereinfachen. Zuvor müssen wir eines einführen: Parameterbezeichner.

In JavaScript verfügt jede Funktion tatsächlich über eine Parameterliste variabler Länge. Das heißt, selbst wenn eine Funktion nur einen Parameter hat, können wir ihr fünf Parameter übergeben. Der folgende Code enthält keine Fehler und das Ergebnis ist „H“.

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

Wenn wir in f() keine anderen Parameter akzeptieren möchten, können wir die Schlüsselwortargumente verwenden. arguments stellt ein Parameterobjekt dar, das über ein Attribut verfügt, das die Länge ähnlich einem Array darstellt.

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

Sie sollten wissen, dass Argumente streng genommen kein Array sind. Argumente haben ein Längenattribut, es gibt jedoch keine Split-, Push- oder Pop-Methoden. In der vorherigen g()-Funktion können wir die erforderlichen Parameter aus Argumenten kopieren, um ein Array zu bilden, und dieses Array dann an apply() übergeben.

var o = {x : 15};
function f(message1, message2) {
 alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
 // arguments[0] = object
 // arguments[1] = func
 var args = [];
 for(var i = 2; i < arguments.length; i++) {
  args.push(arguments[i]);
 }
 func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');

Wenn wir g() aufrufen, können wir zusätzliche Argumente als Parameter übergeben, anstatt die Argumente in ein Array zu stopfen.