Exemples de comparaison et d'utilisation de fonctions d'appel et d'application dans les compétences Javascript_javascript

Les fonctions d'appel et d'application sont rarement utilisées dans certaines opérations Javascript simples. Dans d'autres opérations plus importantes, telles que le développement d'applications Web et le développement de framework js, vous pouvez souvent rencontrer ces deux fonctions. Il existe de nombreuses informations sur Internet concernant l'explication de ces deux fonctions, mais je pense que beaucoup d'informations sont soit scriptées, soit très similaires et manquent d'explications terre-à-terre. Ensuite, j'essaie d'analyser et d'expliquer ces deux fonctions de manière plus claire et plus simple.

Copier le code Le code est le suivant :

Nous pouvons considérer call() et apply() comme des méthodes d’un objet, et appeler des fonctions indirectement en appelant l’exécution de la méthode. Le premier paramètre réel de call() et apply() est l'objet parent de la fonction à appeler, qui est le contexte d'appel. Une référence à celui-ci est obtenue grâce à cela dans le corps de la fonction. Pour appeler la fonction f() sur la méthode de l'objet o, vous pouvez utiliser call() et apply() comme ceci : f.call(o) f.apply(o).[1]

Analysons d'abord l'appel. Voici l'explication d'ECMAScript 3e édition sur la fonction d'appel [2] : lorsque la méthode d'appel est appelée par un objet fonction (func.call(0)), un paramètre nécessaire et plusieurs paramètres facultatifs, son processus d'exécution est le suivant :
a, si l'objet appelant l'appel n'est pas exécutable, lancez une TypeError.
b, Définissez la liste des paramètres sur vide
c. Si la méthode appelée transmet plus d'un paramètre, insérez arg1, arg2... dans la liste des paramètres dans l'ordre
d. Renvoie le résultat de la fonction de l'appel appelant, remplacez-le dans la fonction appelante (func) par le paramètre passé 1 et utilisez la liste de paramètres transmise comme paramètre de cette fonction.
En fait, la fonction call est le prototype de l'objet fonction, c'est-à-dire que la fonction qui appelle l'appel doit également être une fonction lorsque cet appel est appelé, il suffit de remplacer ceci dans la fonction qui appelle l'appel par l'objet. est entré. Voici un exemple :

<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>

Résultat de l'exécution :
C'est la catégorie C1, je m'appelle : Zhang San et j'ai 24 ans
C'est la catégorie C1, je m'appelle : Li Si et j'ai 25 ans
Dans le code ci-dessus, deux classes sont déclarées, C1 et C2 ont deux attributs et une méthode C2 a également les deux mêmes attributs que C1. Après l'instanciation, c1.sayname() affiche les attributs réels, c1 .sayname. call(c2) imprime uniquement les attributs de c2. Pourquoi ? Parce que sayname() est une fonction, et qu'il y a cela dans le corps de la fonction, lorsque l'appel est exécuté, celui-ci sera remplacé par c2, donc les attributs de c2 seront finalement imprimés.
La différence entre apply et call réside dans le passage des paramètres facultatifs de apply sont stockés dans un tableau et transmis en tant que paramètre, tandis que call est divisé en plusieurs paramètres et transmis.
Alors, quelles sont les applications des fonctions d’application et d’appel ? La première est une méthode classique sur Internet pour trouver le maximum d'éléments dans un tableau numérique. L'autre consiste à utiliser apply et call pour implémenter l'héritage, comme suit : 🎜>

<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>

Résultat de l'exécution :

Je marche
J'aime beaucoup jouer
Bonjour à tous, je m'appelle Xiao Ming
Une fonction similaire à call() et apply() est bind(), qui est une nouvelle méthode dans ECMAScript 5, mais bind() peut être facilement simulée dans ECMAScript 3. La fonction bind est également une méthode de Function.prototype en Javascript. Le contenu principal de cette méthode est de lier une fonction à un objet. Lorsque la méthode bind() est liée à la fonction f() et qu'un objet o est passé en paramètre, cette méthode renverra une nouvelle fonction à appeler comme méthode de o. Tous les arguments passés dans la nouvelle fonction seront transmis à la fonction d'origine. Comme suit :

<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>

Résultat de l'exécution :

Bonjour à tous, je m'appelle Xiao Ming, j'ai 20 ans, je viens de Chine et j'aime jouer au ballon
L'exemple ci-dessus équivaut à :

<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>

Il est à noter qu'en mode strict d'ECMAScript 5, le premier argument de call() et apply() deviendra la valeur de this, même si l'argument passé est la valeur d'origine ou même null ou undefined . Dans ECMAScript 3 et en mode non strict, les valeurs null et indéfinies entrantes seront remplacées par la contrepartie globale, et les autres valeurs primitives seront remplacées par l'objet wrapper correspondant.

Matériels de référence

[1], Le guide définitif de Javascript 6e édition, page 189

[2],
Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] ) [3],
Function.prototype.apply (thisArg, argArray)