JavaScript permet aux développeurs d'ajouter des fonctionnalités et des comportements aux pages Web. Les développeurs doivent créer plusieurs fonctions et variables pour ajouter des fonctionnalités à différentes parties de la page Web.
Lors du développement d'applications temps réel, plusieurs développeurs travaillent sur le même projet. Par conséquent, il est nécessaire d’éviter d’écraser par inadvertance des fonctions et des variables lorsque vous travaillez avec plusieurs développeurs. Dans ce didacticiel, nous apprendrons comment empêcher l'écrasement à l'aide d'expressions de fonction immédiatement appelées.
Par exemple, deux collègues travaillent sur le même projet et définissent tous deux la fonction printAge() dans le code et fusionnent le code. Désormais, le navigateur n'exécutera que la dernière fonction définie car il écrasera toutes les autres définitions de fonction portant le même nom. En conséquence, les utilisateurs constatent parfois un comportement inattendu des pages Web. De plus, cela peut se produire avec les noms de variables.
Dans l'exemple ci-dessous, nous avons défini deux variables portant le même nom. Nous affichons les valeurs des variables sur la page Web. Dans la sortie, l'utilisateur peut observer que la deuxième variable « a » écrase la valeur de la première variable « a ».
<html>
<body>
<h2> Visualizing the overriding in JavaScript </h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
var a = "Hello World!";
var a = "Hi World!";
output.innerHTML = "The value of a is " + a;
</script>
</body>
</html>
Les fonctions JavaScript ont la portée fonctionnelle des variables définies à l'intérieur de la fonction. Ainsi, quelles que soient les variables que nous définissons à l’intérieur de la fonction, nous ne pouvons pas y accéder en dehors de la fonction. Par conséquent, nous pouvons définir des variables dont la portée est limitée à la fonction.
Nous pouvons utiliser l'appel de fonction immédiat pour résoudre la réécriture de fonction, c'est-à-dire exécuter la fonction immédiatement après l'avoir définie. Par conséquent, nous n'avons pas besoin de définir des noms de fonctions et la substitution est empêchée.
Les utilisateurs peuvent utiliser la syntaxe suivante pour empêcher les remplacements en JavaScript en utilisant un appel de fonction immédiat.
(function () {
// write JavaScript code here.
})();
Dans la syntaxe ci-dessus, nous avons ajouté l'expression de fonction entre parenthèses. De plus, nous avons ajouté des parenthèses après la définition de la fonction pour appeler la fonction immédiatement.
Dans l'exemple ci-dessous, nous définissons deux fonctions qui sont appelées immédiatement. Dans chaque fonction, nous créons une variable objet "obj" et stockons les propriétés id, user et age. De plus, nous stockons la fonction printAge() dans l'objet.
Les fonctions printAge() des deux objets impriment des messages différents. Ensuite, nous stockons ces deux objets dans l'objet window pour y accéder globalement. Enfin, nous avons exécuté les méthodes printAge() des deux objets et l'utilisateur peut constater qu'il a imprimé le message original sans s'écraser.
<html>
<body>
<h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript
</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
(function (window) {
var obj = {};
obj.id = "123";
obj.user = "Shubham";
var age = "Shubham's Age is 23. <br>";
obj.printAge = function () {
output.innerHTML += age;
}
window.user1 = obj;
})(window);
(function (window) {
var obj = {};
obj.id = "342";
obj.user = "Mukund";
var age = "Mukund's Age is 18. <br>";
obj.printAge = function () {
output.innerHTML += age;
}
window.user2 = obj;
})(window);
user1.printAge();
user2.printAge();
</script>
</body>
</html>
Dans cet exemple, nous définissons également deux expressions de fonction qui sont appelées immédiatement. Dans la première expression, nous définissons l'objet alimentaire. De plus, nous avons défini les méthodes setId() et setName() pour l'objet food et les avons stockées dans l'objet window.
Dans la deuxième expression de fonction, nous définissons à nouveau les méthodes setId() et setName() et les stockons dans l'objet watch(). Ensuite, nous utilisons la montre et les objets alimentaires comme références pour accéder à différentes méthodes. Dans la sortie, nous pouvons voir qu'il imprime le message d'origine sans l'écraser.
<html>
<body>
<h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
(function (window) {
// preparing food data
var food = {};
var setId = function () {
return Date.now();
}
var setName = function () {
return "Apple";
}
window.food = {
setId: setId(),
setName: setName()
};
})(window);
(function (window) {
// preparing watch data
var watch = {};
var setId = function () {
return Date.now();
}
var setName = function () {
return "Titan";
}
window.watch = {
setId: setId(),
setName: setName()
};
})(window);
// printing values of object
output.innerHTML = "Food Id: " + food.setId + "<br/>" + "Food Name: " + food.setName + "<br/>" + "Watch Id: " + watch.setId + "<br/>" + "Watch Name: " + watch.setName;
</script>
</body>
</html>
Nous avons appris à utiliser des expressions de fonction immédiates pour éviter les remplacements lorsque vous travaillez avec du code JavaScript. L'idée est de définir des variables dans la portée de la fonction et d'y accéder globalement via un objet global spécifique, qui ne doit pas avoir de noms prédominants.
Le principal avantage de l'utilisation d'expressions de fonction immédiatement appelées pour éviter l'écrasement est d'éviter la pollution globale des noms de variables. De plus, cela nous permet de rendre le code maintenable et d'améliorer la réutilisabilité du code.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
