Maison > interface Web > js tutoriel > Explication détaillée des fonctions d'application et d'appel dans JavaScript_jquery

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

WBOY
Libérer: 2016-05-16 16:41:43
original
894 Les gens l'ont consulté

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());
Copier après la connexion

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();
Copier après la connexion

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);
Copier après la connexion
Copier après la connexion

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);
Copier après la connexion
Copier après la connexion

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']);
Copier après la connexion

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!']);
Copier après la connexion

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');
Copier après la connexion

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');
Copier après la connexion

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!');
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal