Eine einfache vergleichende Analyse der Verwendung von apply, call und this in JavaScript_Javascript-Kenntnissen

1.Definition anwenden

Anwenden: Rufen Sie die Funktion auf, ersetzen Sie diesen Wert der Funktion durch das angegebene Objekt und ersetzen Sie die Parameter der Funktion durch das angegebene Array.
Syntax: apply([thisObj[,argArray]])
thisObj
Optional. Das als dieses Objekt zu verwendende Objekt.

argArray
Optional. Eine Reihe von Argumenten, die an die Funktion übergeben werden sollen.

2.Anrufdefinition

Aufruf: Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.
Syntax: call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj
Optional. Das Objekt, das als aktuelles Objekt verwendet werden soll.

arg1, arg2, , argN
Optional. Die Parameterliste, die an die Methode übergeben wird.

3. Der Unterschied zwischen den beiden

Der zweite Parameter von call kann von einem beliebigen Typ sein, während der zweite Parameter von apply ein Array oder Argumente sein muss.
Es gibt auch Unterschiede in den Definitionen.

4. Beispielanalyse

(1) Offizielles Beispiel:

function callMe(arg1, arg2){
  var s = "";

  s += "this value: " + this;
  s += "<br />";
  for (i in callMe.arguments) {
    s += "arguments: " + callMe.arguments[i];
    s += "<br />";
  }
  return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5

Die erste mit apply: Definition: Rufen Sie eine Funktion auf und ersetzen Sie diesen Wert der Funktion durch das angegebene Objekt
Rufen Sie die Funktion callMe auf und ersetzen Sie diese in der callMe-Funktion durch das angegebene Objekt 3. Zu diesem Zeitpunkt ändert sich dieses hier vom vorherigen [Objektfenster] zu 3.
Die erste verwendet call: Definition: Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.
Rufen Sie die Methode des Objekts callMe auf und ersetzen Sie das Objekt in callMe durch ein anderes Objekt 3.
Aus der Analyse dieser Ergebnisse ist ersichtlich, dass beide das Objekt im angegebenen Objekt oder den angegebenen Wert verwenden, um dies im Objekt zu ändern.
Man kann auch sagen, dass das Objekt (this) in einer Funktion das Objekt (this) in einer anderen auszuführenden Funktion „kapert“.
Tatsächlich wirft dies die Frage auf: Was genau ist das? Warum ist es so wichtig, immer wieder so viel Mühe auf sich zu nehmen, um die Richtung zu ändern?

(2) Beispiel:

function zqz(a,b){
  return alert(a+b);
}
function zqz_1(a,b){
  zqz.apply(zqz_1,[a,b])
}
zqz_1(1,2)  //->3 

Analyse: Gemäß der Definition: Rufen Sie eine Funktion auf und ersetzen Sie den Wert dieser Funktion durch das angegebene Objekt,
Hier wird die Funktion zqz aufgerufen und dieser Wert der zqz-Funktion durch das angegebene Objekt zqz_1 ersetzt.

Bitte beachten Sie, dass der Funktionsname in js tatsächlich ein Objekt ist, da der Funktionsname eine Referenz auf das Funktionsobjekt ist!

function add(a, b)
{
 alert(a + b);
}
function sub(a, b)
{
 alert(a - b);
}
add.call(sub, 3, 1); // 4

Analyse: Laut Definition: Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.
Hier ist die Methode zum Aufrufen des Objekts „add“ und zum Ersetzen des aktuellen Objekts „sub“ durch das Objekt „add“;

Ein weiteres Beispiel:

function zqz(a,b){
  this.name=a;
  this.age=b;
  alert(this.name+" "+this.age);
}
function zqz_1(a,b){
  zqz.apply(this,[a,b])   //我们亦可以这么写  zqz.apply(this,arguments) 
}
zqz_1("Nic",12)  //Nic 12

Analyse: Gemäß der Definition: Rufen Sie eine Funktion auf und ersetzen Sie den Wert dieser Funktion durch das angegebene Objekt,
Hier wird die Funktion zqz aufgerufen, wobei das angegebene Objekt this verwendet wird, um das this der Funktion zqz zu ersetzen.

Ein weiteres Beispiel:

<input type="text" id="myText"  value="input text">
function Obj(){
  this.value="对象！";
}
var value="global 变量";
function Fun1(){
  alert(this.value);
}
Fun1();  //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj());  //对象！
Fun1(); //global 变量

Analyse: Definition: Rufen Sie eine Methode eines Objekts auf, um das aktuelle Objekt durch ein anderes Objekt zu ersetzen.

Rufen Sie die Methode des Fun1-Objekts auf, um das aktuelle Objekt in Fun1 durch das Fensterobjekt zu ersetzen.
Rufen Sie die Methode des Fun1-Objekts auf und ersetzen Sie das aktuelle Objekt in Fun1 durch das Objekt in der Eingabe.
Rufen Sie die Methode des Fun1-Objekts auf und ersetzen Sie das Objekt im aktuellen Fun1 durch das Objekt im neuen Objekt.

Werfen wir einen Blick auf die Frage eines Internetnutzers:

Mit der Aufrufmethode kann eine Methode im Namen eines anderen Objekts aufgerufen werden. Die Aufrufmethode ändert den Objektkontext einer Funktion vom Anfangskontext in das durch thisObj angegebene neue Objekt. Wenn der Parameter „thisObj“ nicht angegeben wird, wird das globale Objekt als „thisObj“ verwendet.

Dann habe ich es mir zur Aufgabe gemacht, einen Fall zu schreiben, aber was ich geschrieben habe, war anders als ich es mir vorgestellt habe; der Code ist wie folgt

 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 var name = '张三';
 };
 
 parent.call(child); 

Was er ausgibt, ist Kind. Warum nicht Zhang San?

Und es gibt einen Namenswert in child. Die Ausgabe sollte Zhang San sein

 
 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 this.name = '张三';
 };
 var p1 = new child();
 
 parent.call(p1); 

Dies kann Zhang San Warum ausgeben?

Mal sehen, was los ist

Die Verwendung von Call und Apply besteht darin, dass sie mithilfe von Variablen als Funktionsnamen aufgerufen werden können. Zum Beispiel die Callback-Funktion einer Funktion. Die spezifische Verwendung lautet: ausgeführte Funktion.call (a, b, c ...), wobei a das Objekt ist, das in der ausgeführten Funktion angegeben werden muss, das null sein kann, und andere Parameter als Parameter des verwendet werden ausgeführte Funktion. Die Verwendung von apply ist ähnlich, außer dass der zweite Parameter ein Array ist.

Beispiel:

function doPost(url,param,callback){
  //这里处理post请求
  var str = xhr.responseText;
  callback.apply(this,[str]);//相当于调用了callback(str);并把callback中的this设定为doPost对象
}