Maison >interface Web >js tutoriel >Explication détaillée des exemples d'utilisation des méthodes d'attribut de fonction appliquées et appelées en JavaScript

Explication détaillée des exemples d'utilisation des méthodes d'attribut de fonction appliquées et appelées en JavaScript

伊谢尔伦
伊谢尔伦original
2017-07-25 11:55:291290parcourir

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();

On définit 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);

Le premier appel à f() affichera la boîte de dialogue de 10, car cela pointe vers le global à cette fois-ci objet. 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 intéressantes 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 Le deuxième paramètre doit être un tableau. Ce tableau sera passé en paramètre à la fonction cible. La méthode


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

apply() est utile car nous pouvons créer une fonction sans nous 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(). Il y a quelque chose qui ne va pas avec la syntaxe de


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

. 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 de 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(&#39;H&#39;, &#39;e&#39;, &#39;l&#39;, &#39;l&#39;, &#39;o&#39;);

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

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
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