Une analyse comparative simple de l'utilisation de apply, call et ceci dans les compétences JavaScript_javascript

1.appliquer la définition

apply : appelez la fonction, remplacez la valeur this de la fonction par l'objet spécifié et remplacez les paramètres de la fonction par le tableau spécifié.
Syntaxe : apply([thisObj[,argArray]])
cetObj
Facultatif. Objet à utiliser comme objet.

argArray
Facultatif. Un ensemble d'arguments à transmettre à la fonction.

2.définition de l'appel

call : Appelez une méthode d'un objet et remplacez l'objet actuel par un autre objet.
Syntaxe : call([thisObj[, arg1[, arg2[, [, argN]]]]])
cetObj
Facultatif. Objet à utiliser comme objet actuel.

arg1, arg2, , argN
Facultatif. La liste des paramètres qui sera transmise à la méthode.

3. La différence entre les deux

Le deuxième paramètre de call peut être de n'importe quel type, tandis que le deuxième paramètre de apply doit être un tableau ou des arguments.
Il existe également des différences dans les définitions.

4. Exemple d'analyse

(1) Exemple officiel :

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

Le premier utilisant apply : Définition : Appeler une fonction et remplacer la valeur this de la fonction par l'objet spécifié
Appelez la fonction callMe et remplacez-la dans la fonction callMe par l'objet spécifié 3. À ce stade, cela passe ici de la [Fenêtre d'objet] précédente à 3.
Le premier utilise call : Définition : Appeler une méthode d'un objet et remplacer l'objet actuel par un autre objet.
Appelez la méthode de l'objet callMe et remplacez l'objet dans callMe par un autre objet 3.
De l'analyse de ces résultats, on peut voir que les deux utilisent l'objet dans l'objet spécifié ou la valeur spécifiée pour la modifier dans l'objet.
On peut aussi dire que l'objet (this) dans une fonction "détourne" l'objet (this) dans une autre fonction pour être exécuté.
En fait, cela soulève une question : qu’est-ce que c’est exactement ? Pourquoi est-il si important de se donner tant de mal pour changer de direction encore et encore ?

(2) Exemple :

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 : Selon la définition : appeler une fonction et remplacer la valeur this de la fonction par l'objet spécifié,
Ici, la fonction zqz est appelée et la valeur this de la fonction zqz est remplacée par l'objet spécifié zqz_1.

Veuillez noter que le nom de la fonction dans js est en fait un objet, car le nom de la fonction est une référence à l'objet Function !

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

Analyse : Selon la définition : Appeler une méthode d'un objet et remplacer l'objet courant par un autre objet.
Voici la méthode pour appeler l'objet add et remplacer l'objet sub actuel par l'objet add ;

Autre exemple :

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 : Selon la définition : appeler une fonction et remplacer la valeur this de la fonction par l'objet spécifié,
Ici, la fonction zqz est appelée, en utilisant l'objet spécifié this pour remplacer le this de la fonction zqz.

Autre exemple :

<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 : Définition : Appeler une méthode d'un objet pour remplacer l'objet actuel par un autre objet.

Appelez la méthode de l'objet Fun1 pour remplacer l'objet actuel dans Fun1 par l'objet window.
Appelez la méthode de l'objet Fun1 et remplacez l'objet actuel dans Fun1 par l'objet en entrée.
Appelez la méthode de l'objet Fun1 et remplacez l'objet dans le Fun1 actuel par l'objet dans le nouvel obj.

Regardons une question soulevée par un internaute :

La méthode call peut être utilisée pour appeler une méthode au nom d'un autre objet. La méthode d'appel modifie le contexte d'objet d'une fonction du contexte initial au nouvel objet spécifié par thisObj. Si le paramètre thisObj n'est pas fourni, l'objet Global est utilisé comme thisObj.

Ensuite, j'ai pris sur moi d'écrire un cas, mais ce que j'ai écrit était différent de ce que j'imaginais, le code est le suivant

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

Ce qu'il produit est enfant. Pourquoi pas Zhang San D'après la phrase ci-dessus, le contexte parent est devenu enfant

Et il y a une valeur de nom dans child. La sortie devrait être Zhang San Veuillez expliquer
.

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

Cela peut produire Zhang San Pourquoi ?

Voyons ce qui se passe

L'utilisation de call et apply est qu'ils peuvent être appelés en utilisant des variables comme noms de fonction. Par exemple, la fonction de rappel d'une fonction. L'utilisation spécifique est : fonction exécutée.call(a,b,c...), où a est l'objet qui doit être spécifié dans la fonction exécutée, qui peut être nul, et d'autres paramètres sont utilisés comme paramètres du fonction exécutée. L'utilisation de apply est similaire, sauf que le deuxième paramètre est un tableau.

Exemple :

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