Explication détaillée des fonctions d'application et d'appel dans JavaScript_jquery

La première fois que j'ai traduit un article technique, c'était hilarant !

Traduction originale :

Function.apply et Function.call en JavaScript

Le premier paragraphe est omis.

Chaque fonction JavaScript aura de nombreuses méthodes attachées, notamment toString(), call() et apply(). Cela peut vous sembler étrange qu'une fonction puisse avoir ses propres méthodes, mais rappelez-vous que chaque fonction en JavaScript est un objet. Jetez un œil à cet article pour passer en revue (actualiser) les fonctionnalités JavaScript. Vous souhaiterez peut-être également connaître la différence entre les fonctions et les méthodes en JavaScript. Je pense que les descriptions de « fonction » et de « méthode » ne sont que des conventions JavaScript. Les fonctions sont autonomes (par exemple : alert()) et les méthodes sont les propriétés (dictionnaire) d'un objet à l'intérieur de la fonction. Nous appelons des méthodes via l'objet. Chaque objet JavaScript possède une méthode toString(). Ce qui suit est un exemple de code dans un objet fonction, nous pouvons utiliser la méthode toString().

function foo(){
 alert('x');
}
alert(foo.toString());

Parce que les fonctions sont des objets, elles ont leurs propres propriétés et méthodes. Nous pouvons les considérer comme des données. Dans cet article, nous nous concentrons uniquement sur les deux méthodes de fonction apply() et call().

On commence par le code suivant :

var x = 10;
function f(){
 alert(this.x);
}
f();

Nous définissons une fonction globale f(). f() accède à la variable x via le mot-clé this, mais il convient de noter que nous ne pouvons pas appeler cette fonction via une instance d'un objet. À quel objet cela renvoie-t-il ? cela pointera vers cet objet global. Notre variable x est définie dans cet objet global. Le code ci-dessus peut s'exécuter normalement et le résultat sera une boîte de dialogue avec 10 affiché dans la boîte de dialogue.

Nous pouvons appeler call() et apply() grâce à cela. Comme l'exemple suivant montre comment utiliser call() :

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

Appeler f() en premier affichera la boîte de dialogue 10, car elle pointe vers l'objet global à ce moment-là. Ensuite, nous appelons la méthode call() de la fonction f. Le paramètre entrant est o et le résultat en cours montre la valeur de l'attribut x en o, 15. La méthode call() utilisera son premier paramètre comme pointeur this de la fonction f. En d’autres termes, nous indiquerons au runtime vers quel objet cela pointe dans la fonction f.

Ce saut semble un peu drôle, voire un peu anormal pour les programmeurs C, Java et C#. Ce sont les parties amusantes d’ECMAScript.

Vous pouvez également transmettre des paramètres à la fonction via call() :

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

apply() est similaire à call(), sauf que apply() nécessite que le deuxième paramètre soit un tableau. Ce tableau sera passé en paramètre à la fonction cible.

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']);

La méthode apply() est utile car on peut créer une fonction sans se soucier des paramètres de la méthode cible. Cette fonction peut transmettre des paramètres supplémentaires à la méthode via le deuxième paramètre de tableau de apply().

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!']);

Il y a quelque chose qui ne va pas avec cette syntaxe. Afin d'appeler la méthode apply(), nous forçons la fonction cible à utiliser les paramètres du tableau. Heureusement, il existe un moyen de simplifier cette syntaxe. Avant cela, il faut en introduire un : les identifiants de paramètres.

En JavaScript, chaque fonction possède en fait une liste de paramètres de longueur variable. Cela signifie que même lorsqu’une fonction n’a qu’un seul paramètre, on peut lui passer 5 paramètres. Le code suivant n'aura aucune erreur et le résultat sera "H".

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

Dans f(), si nous ne voulons pas accepter d’autres paramètres, nous pouvons utiliser les arguments mots-clés. arguments représente un objet paramètre, qui possède un attribut représentant la longueur similaire à un tableau.

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

Il faut savoir qu'à proprement parler, les arguments ne sont pas un tableau. arguments a un attribut length, mais il n’existe pas de méthodes split, push ou pop. Dans la fonction g() précédente, nous pouvons copier les paramètres requis à partir des arguments pour former un tableau, puis transmettre ce tableau à apply().

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, 'The value of x squared = ', '. Wow!');

Lorsque nous appelons g(), nous pouvons transmettre des arguments supplémentaires en tant que paramètres au lieu de placer les arguments dans un tableau.