5 façons d'appeler des fonctions dans les compétences JavaScript_javascript

Cet article présente en détail les méthodes et principes des différents appels de fonctions en JavaScript, ce qui est très utile pour comprendre les fonctions JavaScript !

JavaScript, 5 façons d'appeler des fonctions

À maintes reprises, je trouve que le code JavaScript bogué est le résultat d'une mauvaise compréhension du fonctionnement des fonctions JavaScript (j'ai écrit une grande partie de ce code, d'ailleurs, JavaScript possède des caractéristiques de programmation fonctionnelle, lorsque nous choisissons d'y faire face). cela, cela deviendra un obstacle à notre progression

.

En tant que débutant, testons cinq méthodes d'appel de fonctions. En apparence, nous penserons que ces fonctions sont très similaires aux fonctions en C#, mais nous verrons dans un instant qu'il existe encore des différences très importantes. Ignorer ces différences rendra sans aucun doute difficile le suivi des bugs. Créons d'abord une fonction simple, qui sera utilisée ci-dessous. Cette fonction renvoie uniquement la valeur actuelle de ceci et des deux paramètres fournis

.

Copier le code Le code est le suivant :

La méthode la plus couramment utilisée, mais malheureusement, les appels de fonctions globaux
Lorsque nous avons appris Javascript, nous avons appris à définir des fonctions en utilisant la syntaxe de l'exemple ci-dessus.
, on sait aussi qu'appeler cette fonction est très simple, il suffit de :

Copier le code Le code est le suivant :

makeArray('un', 'deux');
// => [ fenêtre, 'un', 'deux' ]

Attendez une minute. C'est quoi cette fenêtre


alert( typeof window.methodThatDoesntExist );
// => non défini
alert(typeof window.makeArray);
// =>


window.makeArray('un', 'deux');
// => [ fenêtre, 'un', 'deux' ]

Je dis que la méthode d'appel la plus courante est regrettable car elle fait que les fonctions que nous déclarons sont globales par défaut. Nous savons tous que les membres globaux ne sont pas une bonne pratique en programmation. Cela est particulièrement vrai en JavaScript, en JavaScript Évitez d'utiliser. membres mondiaux, vous ne le regretterez pas.

Fonction JavaScript appelant la règle 1
Dans les fonctions appelées directement sans objet propriétaire explicite, telles que myFunction(), la valeur de this fera en sorte que la valeur de this devienne l'objet par défaut (fenêtre dans le navigateur).

Appel de fonction

Créons maintenant un objet simple, en utilisant la fonction makeArray comme l'une de ses méthodes. Nous utiliserons json pour déclarer un objet, et nous appellerons également cette méthode
.

Copier le code Le code est le suivant :

//création de l'objet
var arrayMaker = {
SomeProperty : 'une certaine valeur ici',
Créer : makeArray
};

//invoque la méthode make()
arrayMaker.make('un', 'deux');
// => [ arrayMaker, 'un', 'deux' ]
// syntaxe alternative, en utilisant des crochets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'un', 'deux' ]

Voir la différence ici, la valeur de this devient l'objet lui-même. Vous vous demandez peut-être pourquoi la définition de la fonction d'origine n'a pas changé, pourquoi n'est-ce pas une fenêtre. Eh bien, c'est ce que la fonction est passée dans JSavacript. une fonction est un type de données standard en JavaScript, un objet pour être exact. Vous pouvez les transmettre ou les copier, c'est comme si la fonction entière avec la liste de paramètres et le corps de la fonction était copiée et affectée à la marque d'attribut arrayMaker, puis définissez un. arrayMaker comme ceci :

Copier le code Le code est le suivant :

var arrayMaker = {
SomeProperty : 'une certaine valeur ici',
Faire : fonction (arg1, arg2) {
          return [ this, arg1, arg2 ];
>
};

Fonction JavaScript appelant la règle 2

Dans une syntaxe d'appel de méthode, telle que obj.myFunction() ou obj['myFunction'](), la valeur de this est obj

C'est une source majeure de bugs dans le code de gestion des événements, consultez ces exemples

Copier le code Le code est le suivant :

Cliquer sur le premier bouton affichera "btn" car il s'agit d'un appel de méthode, et c'est l'objet (élément bouton) auquel il appartient. Cliquer sur le deuxième bouton affichera "window" car buttonClicked est appelé directement (contrairement à obj. buttonClicked().) C'est la même chose que notre troisième bouton, plaçant la fonction de gestionnaire d'événements directement dans l'étiquette. Ainsi, le résultat du clic sur le troisième bouton est le même que sur le deuxième
. L'utilisation d'une bibliothèque JS comme jQuery présente l'avantage que lorsqu'une fonction de gestion d'événements est définie dans jQuery, la bibliothèque JS aidera à réécrire la valeur de celle-ci pour garantir qu'elle contient une référence à l'élément source d'événement actuel,

Copier le code Le code est le suivant :

//Utilisez jQuery
$('#btn1').click( function() {
alert( this.id ); // jQuery garantit que 'this' sera le bouton
});

Comment jQuery surcharge-t-il la valeur de ceci ? Continuer la lecture

Les deux autres : apply() et call()

Plus vous utilisez des fonctions JavaScript, plus vous constatez que vous devez transmettre des fonctions et les appeler dans différents contextes, tout comme Qjuery le fait dans les gestionnaires d'événements, et vous devez souvent réinitialiser la valeur de ceci. vous, les fonctions sont également des objets en Javascript. Les objets fonction contiennent des méthodes prédéfinies, dont deux sont apply() et call(). Nous pouvons les utiliser pour modifier cela.
.

Copier le code Le code est le suivant :

var gasGuzzler = { année : 2008, modèle : 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'un', 'deux' ] );
// => [ gasGuzzler, 'un', 'deux' ]
makeArray.call( gasGuzzler, 'un', 'deux' );
// => [ gasGuzzler, 'un', 'deux' ]

Les deux méthodes sont similaires. La différence réside dans les paramètres suivants. Function.apply() utilise un tableau pour transmettre à la fonction, tandis que Function.call() transmet ces paramètres indépendamment. En pratique, vous constaterez que apply(. ) est plus pratique dans la plupart des cas.

Fonction JSavascript appelant la règle 3

Si nous voulons surcharger la valeur de this sans copier la fonction dans une méthode, nous pouvons utiliser myFunction.apply( obj ) ou myFunction.call( obj ).

Constructeur

Je ne veux pas approfondir la définition des types en Javascript, mais pour le moment, nous devons savoir qu'il n'y a pas de classes en Javascript et que tout type personnalisé nécessite une fonction d'initialisation, définie à l'aide de l'objet prototype (comme un attribut de la fonction d'initialisation) Votre type est aussi un joli isme, créons un type simple

Copier le code Le code est le suivant :

//Déclarer un constructeur
fonction ArrayMaker (arg1, arg2) {
This.someProperty = 'peu importe';
This.theArray = [ this, arg1, arg2 ];
>
// Déclare la méthode d'instanciation
ArrayMaker.prototype = {
UneMéthode : fonction () {
alert( 'uneMéthode appelée');
},
GetArray : fonction () {
          return this.theArray;
>
};

var am = new ArrayMaker( 'un', 'deux' );
var autre = new ArrayMaker( 'first', 'second' );

am.getArray();
// => [ suis, 'un' , 'deux' ]

Une chose très importante et remarquable est le nouvel opérateur qui apparaît avant l'appel de fonction. Sans cela, votre fonction est comme une fonction globale, et les propriétés que nous créons seront créées sur l'objet global (fenêtre), et vous. Je ne veux pas cela, un autre sujet est que, comme il n'y a pas de valeur de retour dans votre constructeur, si vous oubliez d'utiliser l'opérateur new, certaines de vos variables seront affectées de manière non définie. Pour cette raison, la fonction du constructeur l'est. une bonne habitude de commencer par une majuscule, qui peut servir de rappel pour ne pas oublier le nouvel opérateur précédent lors de l'appel

.

Avec cette prudence, le code de la fonction d'initialisation est similaire à la fonction d'initialisation que vous écrivez dans d'autres langues. La valeur de ceci sera l'objet que vous créerez.

Règle d'appel de fonction Javascript 4

Lorsque vous utilisez une fonction comme fonction d'initialisation, comme MyFunction(), le runtime Javascript attribuera la valeur de celle-ci à l'objet nouvellement créé.

J'espère que comprendre les différences dans la façon dont les différentes fonctions sont appelées gardera votre code JavaScript à l'abri des bogues, et s'assurer que vous en connaissez toujours la valeur est la première étape pour les éviter.