Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der Verwendungsbeispiele für die Anwendung und den Aufruf von Funktionsattributmethoden in JavaScript

伊谢尔伦
Freigeben: 2017-07-25 11:55:29
Original
1193 Leute haben es durchsucht

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());
Nach dem Login kopieren

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();
Nach dem Login kopieren

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 call() verwendet wird:


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

Beim ersten Aufruf von f() wird das Dialogfeld 10 angezeigt, da dies auf das globale at zeigt Dieses Mal Objekt. 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 wenig 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);
Nach dem Login kopieren
Nach dem Login kopieren

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


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']);
Nach dem Login kopieren

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. Mit der Syntax von


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!']);
Nach dem Login kopieren

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');
Nach dem Login kopieren

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(&#39;H&#39;, &#39;e&#39;, &#39;l&#39;, &#39;l&#39;, &#39;o&#39;);
Nach dem Login kopieren

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, &#39;The value of x squared = &#39;, &#39;. Wow!&#39;);
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendungsbeispiele für die Anwendung und den Aufruf von Funktionsattributmethoden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!