Explication détaillée de 4 méthodes d'appel des compétences JavaScript function

En JavaScript, les fonctions sont des citoyens de première classe. Les fonctions sont un type de données en JavaScript, et non seulement utilisées comme module comme C# ou d'autres langages descriptifs. Il existe quatre modes d'appel pour les fonctions, à savoir : le formulaire d'appel de fonction, le formulaire d'appel de méthode, le formulaire de constructeur et le formulaire d'application. Parmi tous les modes d'appel ici, la principale différence réside dans la signification du mot-clé this. Ces formes d'appel sont présentées ci-dessous.

Contenu principal de cet article :

1. Analysez les quatre formes d'appel des fonctions
2 Clarifiez la signification de ceci dans la fonction
3 Clarifiez le processus de construction des objets de fonction
4. Apprenez à utiliser le contexte pour appeler des fonctions

. 🎜>

1. Formulaire d'appel de fonction

Le formulaire d'appel de fonction est le formulaire le plus courant et le mieux compris. La forme dite de fonction consiste à déclarer une fonction et à l'appeler directement. Par exemple :

Copier le code Le code est le suivant :

// Déclarer une fonction et appelez 
function func() {
 alert("Hello World");
}
func();

ou :

Copier le code Le code est le suivant :

// Définissez la fonction à l'aide de l'expression Lambda de la fonction, puis appelez 
var func = function() {
 alert("Bonjour programmeur");
};
func();

Ces deux morceaux de code feront apparaître une boîte de dialogue dans le navigateur pour afficher le texte dans la chaîne. Il s'agit d'un appel de fonction.

Vous pouvez constater que l'appel de fonction est très simple, tout comme ce que vous apprenez habituellement. La clé ici est que dans le mode d'appel de fonction, le mot-clé this dans la fonction fait référence à l'objet global, qui est l'objet fenêtre dans le navigateur. Par exemple :

Copier le code Le code est le suivant :

var func = function() {
 alert(this);
};
func();

À ce moment, une boîte de dialogue apparaîtra et imprimera [object Window].

2. Mode d'appel de méthode

Le mode d'appel de fonction est très simple et constitue la méthode d'appel la plus basique. Mais c'est la même fonction, mais elle est différente après l'avoir assignée à un membre d'un objet. Après avoir attribué une fonction à un membre d’un objet, on ne l’appelle plus fonction, mais méthode. Par exemple :

Copier le code Le code est le suivant :

// Définir une fonction 
var func = function() {
 alert("Suis-je une fonction ?");
};
// Attribuez-le à un objet 
var o = {};
 o. fn = func; // Attention à ne pas ajouter de parenthèses ici 
// Appelez 
o.fn(); 

À l'heure actuelle, o.fn est une méthode, pas une fonction; . En fait, le corps de la méthode fn est exactement le même que celui de func, mais il y a ici une différence subtile. Regardez le code ci-dessous :

Copiez le code Le code est le suivant :

// Continuez le code ci-dessus
alert(o.fn === func);
Le résultat imprimé est vrai, ce qui indique que les deux fonctions sont la même chose, mais modifiez le code de la fonction :

//Modifier le corps de la fonction
var func = function() {
alert(this);
};
var o = {};
o.fn = func;
//Comparez
alert(o.fn === func);
// Appelez
func();
o.fn();

Exécutez ici En conséquence, les deux fonctions sont identiques, le résultat imprimé est donc vrai. Cependant, comme les appels des deux fonctions sont différents, l'appel de func imprime [object Window], tandis que le résultat d'impression de o.fn est [object Object].

Voici la différence entre l'appel de fonction et l'appel de méthode. Dans l'appel de fonction, cela fait spécifiquement référence à la fenêtre d'objet globale, tandis que dans la méthode, cela fait spécifiquement référence à l'objet actuel, c'est-à-dire que ceci dans o.fn fait référence à l'objet. o.

3. Mode d'appel du constructeur

C'est aussi une fonction. En mode fonction pure, cela fait référence à la fenêtre ; en mode méthode objet, cela fait référence à l'objet actuel. En plus de ces deux cas, les fonctions en JavaScript peuvent aussi être des constructeurs. La syntaxe pour utiliser une fonction comme constructeur consiste à faire précéder l’appel de fonction du mot-clé new. Tel que le code :

Copier le code Le code est le suivant :

// Définir un constructeur 
var Person = function() {
 this.name = "Programmer";
 this.sayHello = function() {
 alert( "Bonjour , c'est" this.name);
 };
};
// Appelez le constructeur et créez l'objet 
var p = new Person();
// Utiliser l'objet
p.sayHello();

Le cas ci-dessus crée d'abord un constructeur Person, puis utilise le constructeur pour créer l'objet p. Une nouvelle syntaxe est utilisée ici. Utilisez ensuite l'objet pour appeler la méthode sayHello(). Ce cas d'utilisation d'un constructeur pour créer un objet est relativement simple. Comme vous pouvez le voir sur le cas, il s'agit de l'objet lui-même. En plus de l'utilisation simple ci-dessus, il y a plusieurs changements dans les fonctions en tant que constructeurs, à savoir :

1. Tous les attributs qui doivent être utilisés par l'objet doivent être guidés par cela

2. La signification de l'instruction return de la fonction a été réécrite. Si un non-objet est renvoyé, celui-ci sera renvoyé.

dans le constructeur

Nous devons analyser le processus de création d'objets pour en connaître la signification. Par exemple, le code suivant :

Copiez le code Le code est le suivant :

var Person = function() {
 This.name = "Programmer";
};
var p = new Person();

La fonction Person est d'abord définie ici. exécution entière :

1. Lorsque le programme exécute cette phrase, il n'exécutera pas le corps de la fonction, donc l'interpréteur JavaScript ne connaît pas le contenu de cette fonction.

2. Ensuite, exécutez le nouveau mot-clé pour créer un objet. L'interpréteur alloue de la mémoire, obtient une référence à l'objet et transmet la référence au nouvel objet à la fonction.

3. Exécutez ensuite la fonction et transmettez-lui la référence d'objet transmise. En d’autres termes, dans le constructeur, il s’agit de l’objet qui vient d’être créé par new.

4. Ajoutez ensuite des membres à ceci, c'est-à-dire ajoutez des membres à l'objet.

5. Enfin, la fonction se termine, renvoie ceci et le remet à la variable de gauche.

Après avoir analysé l'exécution du constructeur, nous pouvons constater que ceci dans le constructeur est l'objet actuel.

retour

dans le constructeur

La signification de return dans le constructeur a changé. Premièrement, si dans le constructeur, si un objet est renvoyé, alors la signification d'origine est conservée. Si un non-objet est renvoyé, tel que des nombres, des booléens et des chaînes, alors ceci est renvoyé. S'il n'y a pas d'instruction return, alors ceci est également renvoyé :

Copier le code Le code est le suivant :

// Renvoyer un objet return
var ctr = function() {
 this .name = "Zhao Xiaohu";
 return {
 name:"Niu Liangliang"
 };
};
//Créer un objet
var p = new ctr(); 
//Attribut de nom d'accès
alert(p.name);

Exécutez le code et le résultat imprimé ici est "Niu Liangliang". Parce que le constructeur renvoie un objet, la signification du retour est conservée et le contenu renvoyé est l'objet après le retour. Regardez le code suivant :

Copier le code. Le code est le suivant :

// Définir le constructeur qui renvoie les données non-objets 
var ctr = function() {
 this.name = " Zhao Xiaohu";
 Retourner "Niu Liangliang";
};
// Créer un objet 
var p = new ctr();
// Utiliser 
alert(p); 
alert(p. name);

Le résultat de l'exécution du code est que la fenêtre contextuelle imprime d'abord [object Object], puis imprime "Zhao Xiaohu Parce que le retour ici est un". chaîne, qui appartient au type de base, alors l'instruction return ici n'est pas valide et renvoie cet objet, donc la première imprime [objet Objet] et la seconde n'imprime pas undéfini.

4. Appliquer le mode d'appel

En plus des trois modes d'appel ci-dessus, les fonctions en tant qu'objets ont également des méthodes d'application et des méthodes d'appel qui peuvent être utilisées. Il s'agit du quatrième mode d'appel, que j'appelle le mode d'application.

Introduisez d'abord le mode d'application. Tout d'abord, le mode d'application peut être utilisé comme une fonction ou une méthode. On peut dire qu'il s'agit d'une méthode d'utilisation flexible. Regardez d’abord la syntaxe : function name.apply(object, paramètre array);

La syntaxe ici est plutôt obscure, utilisons donc des exemples pour illustrer :

1. Créez deux nouveaux fichiers js, à savoir "js1.js" et "js2.js"

2. Ajouter le code

Copier le code Le code est le suivant :

// Dans le fichier js1.js
var func1 = function() {
this.name = "Programmer";
};
func1.apply(null); 🎜>alerte(nom);
// fichier js2.js

var func2 = function() {
this.name = "Programmer";
};
var o = {};
func2. (o);
alerte(o.name);

3. Lors de l'exécution de deux morceaux de code respectivement, vous pouvez constater que l'attribut name du premier fichier a été chargé dans la fenêtre d'objet global tandis que l'attribut name du deuxième fichier se trouve dans l'objet entrant o, c'est-à-dire , le One équivaut à un appel de fonction et le second équivaut à un appel de méthode.

Les paramètres ici sont les paramètres de la méthode elle-même, mais ils doivent être stockés sous la forme d'un tableau. Par exemple, le code :

Copiez le. code Le code est le suivant :

// Un exemple de tableau
var arr1 = [1,2,3,[4,5] ,[6,7,8]];
// Développez-le
var arr2 = arr1.conact.apply([], arr1);
Puis introduisez le mode d'appel La plus grande différence entre le mode d'appel. et le mode d'application est que les paramètres de l'appel n'utilisent pas de tableaux. Voir Le code suivant le précisera :
// Définir la méthode

var func = function(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
//Créer un objet
var o = {};
//Ajouter des membres à l'objet
//appliquer le mode
var p1 = func.apply(o, [" Zhao Xiaohu", 19 ans, "Homme"]);
// mode d'appel
var p2 = func.call(o, "Zhao Xiaohu", 19 ans, "Homme");

Dans le code ci-dessus, les résultats du mode d'application et du mode d'appel sont les mêmes.

En fait, en utilisant le mode d'application et le mode d'appel, vous pouvez contrôler la signification de ceci de n'importe quelle manière, et ils sont largement utilisés dans le mode de conception de la fonction js. Pour résumer brièvement, il existe quatre modes d'appel de fonction en js, à savoir : fonctionnel, méthode, constructeur et appliquer. Dans ces modes, la signification de this est : dans la fonction, c'est la fenêtre de l'objet global, Dans la méthode, ceci. fait référence à l'objet actuel. Dans le constructeur, this fait référence à l'objet créé. En mode application, cela peut être spécifié arbitrairement. Si null est utilisé dans le modèle d'application, il s'agit d'un modèle de fonction et si un objet est utilisé, il s'agit d'un modèle de méthode.

5. Exemples complets

Terminons cet article par un cas. Description du cas : Il y a un div avec l'identifiant de dv Lorsque la souris est déplacée dessus, la hauteur augmente de 2 fois. Lorsque la souris est laissée, la hauteur sera restaurée directement en dessous :

Copier le code Le code est le suivant :

var dv = document.getElementById("dv");
var height = parseInt(dv.style.height || dv.offsetHeight);
var intervalId;
dv.onmouseover = function() {
 // Arrête l'animation en cours d'exécution 
 clearInterval(intervalId);
 // Récupère la hauteur cible 
 var toHeight = height * 2;
 // Récupère l'objet actuel 
 var that = this;
 // Démarrez le minuteur, changez lentement 
 intervalId = setInterval(function() {
 // Obtenez la hauteur actuelle 
 var height = parseInt( dv. style.height || dv.offsetHeight);
                                                                                    Enregistrez la taille de pas qui doit être modifiée à chaque fois. heure                                                                                                                                                 Déterminez le changement et arrêtez le chronomètre si la taille du pas est 0
 if( h > 0 ) { 
 ) "px";
 } else {
                                                                                                                           // Le principe est le même qu'avant
 clearInterval(intervalId);
 var toHeight = height;
 var that = this; 
 intervalId = setInterval(function() {
 var height = parseInt(dv .style.height || dv.offsetHeight);
 var h = Math.ceil(Math.abs(height - toHeight) / 10);
 if( h > 0 ) {
 that.style .height = (height - h) "px";
     } else {
                                                                           🎜>

Explication détaillée de 4 méthodes d'appel des compétences JavaScript function_javascript