Vergleichs- und Verwendungsbeispiele von Aufruf- und Anwendungsfunktionen in Javascript_Javascript-Kenntnissen

Die Funktionen „Aufruf“ und „Anwenden“ werden in einigen einfachen Javascript-Vorgängen selten verwendet. Bei anderen größeren Vorgängen wie der Entwicklung von Webanwendungen und der Entwicklung von JS-Frameworks können Sie häufig auf diese beiden Funktionen stoßen. Im Internet gibt es viele Informationen über die Erklärung dieser beiden Funktionen, aber ich denke, dass viele der Informationen entweder in Skripten verfasst sind oder sehr ähnlich sind und es an bodenständigen Erklärungen mangelt. Als nächstes versuche ich, diese beiden Funktionen klarer und einfacher zu analysieren und zu erklären.

Code kopieren Der Code lautet wie folgt:

Wir können call() und apply() als Methoden eines Objekts betrachten und Funktionen indirekt aufrufen, indem wir die Ausführung der Methode aufrufen. Der erste tatsächliche Parameter von call() und apply() ist das übergeordnete Objekt der aufzurufenden Funktion, das den aufrufenden Kontext darstellt. Dadurch wird im Funktionskörper eine Referenz darauf erhalten. Um die Funktion f() für die Methode des Objekts o aufzurufen, können Sie call() und apply() wie folgt verwenden: f.call(o) f.apply(o).[1]

Lassen Sie uns zunächst den Aufruf analysieren. Hier ist die Erklärung der Aufruffunktion in ECMAScript 3rd Edition [2]: Wenn die Aufrufmethode von einem Funktionsobjekt (func.call(0)) aufgerufen wird, sind ein notwendiger Parameter und mehrere optionale Parameter erforderlich. Der Ausführungsprozess ist wie folgt:
a: Wenn das aufrufende Objekt nicht ausführbar ist, wird ein TypeError ausgelöst.
b, Setzen Sie die Parameterliste auf leer
c. Wenn die aufgerufene Methode mehr als einen Parameter übergibt, dann fügen Sie arg1, arg2... in der Reihenfolge
in die Parameterliste ein d. Geben Sie das Funktionsergebnis des aufrufenden Aufrufs zurück, ersetzen Sie es in der aufrufenden Funktion (func) durch den übergebenen Parameter 1 und verwenden Sie die übergebene Parameterliste als Parameter dieser Funktion.
Tatsächlich ist die Aufruffunktion der Prototyp des Funktionsobjekts. Das heißt, die Funktion, die den Aufruf aufruft, muss auch eine Funktion sein. Wenn dieser Aufruf aufgerufen wird, ersetzen Sie dies einfach in der Funktion, die den Aufruf aufruft eingegangen. Hier ist ein Beispiel:

<script>
 function C1(){
 this.name='张三';
 this.age='24';
 this.sayname=function(){
  console.log("这里是C1类，我的名字是:"+this.name+"我的年龄是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

Ausführungsergebnis:
Das ist Kategorie C1, mein Name ist Zhang San und ich bin 24 Jahre alt
Das ist Kategorie C1, mein Name ist: Li Si und ich bin 25 Jahre alt
Im obigen Code werden zwei Klassen deklariert, C1 und C2, und eine Methode C2 hat auch die gleichen zwei Attribute wie C1. Nach der Instanziierung gibt c1.sayname() die tatsächlichen Attribute aus. call(c2) gibt nur die Attribute von c2 aus. Da sayname() eine Funktion ist und diese im Funktionskörper vorhanden ist, wird sie bei der Ausführung des Aufrufs durch c2 ersetzt, sodass die Attribute von c2 schließlich gedruckt werden.
Der Unterschied zwischen apply und call liegt in der Übergabe optionaler Parameter. Alle optionalen Parameter von apply werden in einem Array gespeichert und als ein Parameter übergeben, während call in mehrere Parameter aufgeteilt und übergeben wird.
Was sind also die Anwendungen von Apply- und Call-Funktionen? Die erste ist eine klassische Methode im Internet, um das maximale Element in einem numerischen Array zu finden. Verwenden Sie einfach Math.max.apply(null,array), die andere besteht darin, die Vererbung wie folgt zu implementieren:

<script> 
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜欢玩耍');
 }
 this.intruduce=function(){
  console.log('大家好，我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

Ausführungsergebnis:
Ich gehe
Ich spiele sehr gerne
Hallo zusammen, ich bin Xiao Ming
Eine ähnliche Funktion wie call() und apply() ist bind(), eine neue Methode in ECMAScript 5, aber bind() kann in ECMAScript 3 leicht simuliert werden. Die Bindefunktion ist auch eine Methode von Function.prototype in Javascript. Der Hauptinhalt dieser Methode besteht darin, eine Funktion an ein Objekt zu binden. Wenn die bind()-Methode an die Funktion f() gebunden ist und ein Objekt o als Parameter übergeben wird, gibt diese Methode eine neue Funktion zurück, die als Methode von o aufgerufen werden soll. Alle an die neue Funktion übergebenen Argumente werden an die ursprüngliche Funktion übergeben. Wie folgt:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中国","打球"));
</script>

Ausführungsergebnis:
Hallo zusammen, mein Name ist Xiao Ming, ich bin 20 Jahre alt, komme aus China und spiele gerne Ball
Das obige Beispiel entspricht:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中国","打球"]));
    //或者下面这个
 console.log(introduce.call(xiaoming,"中国","打球"));
</script>

Es ist zu beachten, dass im strikten Modus von ECMAScript 5 das erste Argument von call() und apply() zum Wert von this wird, auch wenn das übergebene Argument der ursprüngliche Wert oder sogar null oder undefiniert ist. In ECMAScript 3 und im nicht strikten Modus werden eingehende Null- und undefinierte Werte durch das globale Gegenstück ersetzt, und andere primitive Werte werden durch das entsprechende Wrapper-Objekt ersetzt.

Referenzmaterialien

[1], The Definitive Guide to Javascript 6. Auflage, Seite 189
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)