Cet article présente en détail les méthodes et principes de divers appels de fonctions en JavaScript, qui est d'une grande aide pour comprendre les fonctions JavaScript!
Javascript, 5 façons d'appeler les fonctions
À maintes reprises, j'ai constaté que le code JavaScript sans bug est causé par ne pas vraiment comprendre comment fonctionnent les fonctions JavaScript (en passant, une grande partie de ce code est écrite par moi). JavaScript a la nature de la programmation fonctionnelle, qui deviendra un obstacle à nos progrès lorsque nous choisissons d'y faire face.
En tant que débutants, testons cinq appels de fonction. De la surface, nous penserons que ces fonctions sont très similaires à celles de C #, mais nous pouvons voir qu'il existe encore des différences très importantes dans le futur. Ignorer ces différences conduira sans aucun doute à des bogues difficiles à suivre. Créons d'abord une fonction simple, qui sera utilisée ci-dessous, et cette fonction renvoie uniquement la valeur actuelle de ceci et les deux paramètres fournis.
La copie de code est la suivante:
<script type = "text / javascript">
fonction makearray (arg1, arg2) {
Retour [ceci, Arg1, Arg2];
}
</cript>
La méthode la plus couramment utilisée, mais malheureusement, les appels de fonction mondiale
Lorsque nous apprenons JavaScript, nous apprenons à définir des fonctions à l'aide de la syntaxe dans l'exemple ci-dessus.
, Nous savons également que appeler cette fonction est très simple, et tout ce que nous devons faire est:
La copie de code est la suivante:
makearray («un», «deux»);
// => [fenêtre, 'un', 'deux']
Attends une minute. Quelle est cette fenêtre
alert (typeof window.methodThatDoesNtexist);
// => indé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 provoque la fonction que nous déclarons globale par défaut. Nous savons tous que les membres mondiaux ne sont pas les meilleures pratiques pour la programmation. Ceci est particulièrement correct dans JavaScript. Vous ne regretterez pas d'éviter les membres mondiaux en JavaScript.
JavaScript Fonction Call Règle 1
Dans les fonctions qui ne sont pas appelées directement par des objets propriétaires explicites, tels que myFonction (), fera devenir cette valeur l'objet par défaut (fenêtre dans le navigateur).
Appels de fonction
Créons maintenant un objet simple, utilisons la fonction makearray comme méthode. Nous utiliserons la méthode JSON pour déclarer un objet, et nous appellerons également cette méthode
La copie de code est la suivante:
// Création de l'objet
var arraymaker = {
une certaine propriété: «une certaine valeur ici»,
faire: 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, cette valeur 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 ce n'est pas une fenêtre. Eh bien, c'est ainsi que les fonctions sont passées dans JSAVAR. Les fonctions sont un type de données standard dans JavaScript, ou pour être précis, un objet. Vous pouvez les passer ou les copier. C'est comme si la fonction entière et la liste des paramètres et le corps de la fonction étaient copiés et affectés à la propriété Faire dans le Arraymaker, donc c'est comme définir un arraymaker comme ceci:
La copie de code est la suivante:
var arraymaker = {
une certaine propriété: «une certaine valeur ici»,
faire: fonction (arg1, arg2) {
Retour [ceci, Arg1, Arg2];
}
};
JavaScript Fonction Call Règle 2
Dans une syntaxe d'appel de méthode, comme obj.myfonction () ou obj ['myfunction'] (), la valeur de ceci est obj
Il s'agit de la principale source de bogues dans le code de gestion des événements. Jetez un œil à ces exemples
La copie de code est la suivante:
<input type = "bouton" value = "bouton 1" id = "btn1" />
<input type = "bouton" value = "bouton 2" id = "btn2" />
<input type = "Button" value = "Button 3" id = "btn3" onclick = "boutonClicked ();" />
<script type = "text / javascript">
fonction boutonClicked () {
var text = (this === fenêtre)? 'fenêtre': this.id;
alerte (texte);
}
var button1 = document.getElementById ('btn1');
var button2 = document.getElementById ('btn2');
Button1.OnClick = ButtonClicked;
Button2.OnClick = function () {ButtonClicked (); };
</cript>
En cliquant sur le premier bouton, affiche "BTN" car il s'agit d'un appel de méthode, c'est l'objet dans lequel il appartient (élément de bouton). Cliquer sur le deuxième bouton affiche "Fenêtre" car ButtonClicked est appelé directement (contrairement à obj.buttonClicked ().) C'est la même chose que notre troisième bouton, ce qui place la fonction de gestion des événements directement dans l'étiquette. Ainsi, le résultat de cliquer sur le troisième bouton est le même que le second.
L'utilisation de la bibliothèque JS comme JQuery a l'avantage. Lorsqu'un gestionnaire d'événements est défini dans jQuery, la bibliothèque JS aidera à remplacer cette valeur pour s'assurer qu'elle contient des références à l'élément de source d'événements actuel.
La copie de code est la suivante:
// utilise jQuery
$ ('# btn1'). cliquez sur (fonction () {
alerte (this.id); // jQuery s'assure que «ce» sera le bouton
});
Comment jQuery surcharge la valeur de cela? Continuer à lire
Les deux autres: appliquer () et appeler ()
Plus vous utilisez des fonctions JavaScript, plus vous trouvez que vous devez transmettre des fonctions et les appeler dans différents contextes. Tout comme QJUery fait dans les fonctions de gestion des événements, vous devez souvent réinitialiser cette valeur. Rappelez-vous ce que je vous ai dit, dans les fonctions JavaScript sont également des objets. Les objets de fonction contiennent des méthodes prédéfinies, dont deux appliquent () et Call (), que nous pouvons utiliser pour réinitialiser cela.
La copie de code est la suivante:
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»]
Ces deux méthodes sont similaires, la différence est la différence dans les paramètres suivants. Function.Apply () utilise un tableau pour passer à la fonction, tandis que Function.Call () transmet ces paramètres indépendamment. En pratique, vous constaterez qu'appliquer () est plus pratique dans la plupart des cas.
JSAVARScript Fonction Call Règle 3
Si nous voulons surcharger la valeur de cela sans copier la fonction sur une méthode, nous pouvons utiliser MyFunction.Apply (OBJ) ou MyFunction.Call (OBJ).
Constructeur
Je ne veux pas creuser dans la définition des types en JavaScript, mais pour le moment, nous devons savoir qu'il n'y a pas de classe en JavaScript, et tout type personnalisé nécessite une fonction d'initialisation. C'est également une bonne idée de définir votre type à l'aide d'un objet prototype (comme propriété de la fonction d'initialisation). Créons un type simple
La copie de code est la suivante:
// déclare un constructeur
Fonction Arraymaker (Arg1, Arg2) {
this.someproperty = 'what';
this.theArray = [ceci, arg1, arg2];
}
// Déclarer la méthode d'instanciation
Arraymaker.prototype = {
SomeMethod: function () {
alerte ('Somemethod appelé');
},
getArray: function () {
Renvoyez ceci.thearray;
}
};
var am = new ArrayMaker ('un', 'deux');
var autre = new ArrayMaker ('First', 'Second');
am.getArray ();
// => [am, 'un', 'deux']
Un nouveau opérateur est un nouvel opérateur qui apparaît devant un 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 un objet global (fenêtre), et vous ne voulez pas le faire. Un autre sujet est que, car il n'y a pas de valeur de retour dans votre constructeur, si vous oubliez d'utiliser le nouvel opérateur, certaines de vos variables seront affectées non définies. Pour cette raison, c'est une bonne habitude de commencer par des majuscules. Cela peut être utilisé comme rappel pour ne pas oublier le nouvel opérateur précédent lors de l'appel.
Avec une telle prudence, le code dans la fonction d'initialisation est similaire à la fonction d'initialisation que vous avez écrite dans d'autres langues. La valeur de cela sera l'objet que vous allez créer.
JavaScript Fonction Call Règle 4
Lorsque vous utilisez une fonction comme une fonction d'initialisation, comme myFunction (), JavaScript Runtime spécifiera la valeur de cela en tant qu'objet nouvellement créé.
J'espère que la compréhension des différences dans les différentes méthodes d'appel des fonctions éloignera votre code SjavaScript des bogues, et certains de ces bugs s'assureront que vous sachiez toujours que la valeur de ceci est la première étape pour les éviter.