Explication des étendues et des chaînes de portées en JavaScript
En JavaScript, Scope définit comment et dans quelle partie du code nous accédons aux variables et aux fonctions. En termes simples, la portée peut nous aider à améliorer la sécurité et la lisibilité de notre code. Par conséquent, nous ne pouvons accéder aux variables et aux fonctions que dans leur portée et non en dehors d’elles.
Nous aborderons différents types de scopes dans ce tutoriel.
Portée mondiale en JavaScript
Les variables et fonctions définies globalement s'entendent en dehors de tous les blocs et fonctions qui ont une portée globale . Nous pouvons accéder à toutes les variables et fonctions de portée globale n'importe où dans le code.
Grammaire
Les utilisateurs peuvent suivre la syntaxe suivante pour définir des variables à portée globale.
var global = 30;
function func() {
var b = global; // global variable has a global scope so we can access it inside the function.
}
Ici, la variable globale global est déclarée en dehors de toute fonction, elle a donc une portée globale. On y accède ensuite à l'intérieur de la fonction func en déclarant la variable locale b et en lui attribuant la valeur de la variable globale global.
Exemple
Dans cet exemple, nous définissons une variable globale avec une portée globale. Nous y accédons à l'intérieur d'une fonction appelée func() et renvoyons sa valeur à partir de la fonction.
Dans le résultat, nous pouvons observer que la fonction func() renvoie 20, qui est la valeur de la variable globale.
<html>
<body>
<h2> Defining a variable with <i> global </i> scope </h2>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
var global = 20;
function func() {
return global;
}
output.innerHTML += "The value of variable named global: " + func();
</script>
</body>
</html>
Portée locale/fonction
La portée locale est également appelée portée de fonction. Les variables définies à l'intérieur d'une fonction ont une portée de fonction/une portée locale. Nous ne pouvons pas accéder aux variables en dehors de la fonction.
Grammaire
Vous pouvez suivre la syntaxe ci-dessous pour connaître la portée locale des variables et des fonctions -
function func() {
var local_var = "Hi!";
}
console.log(local_var); // this will raise an error
Ici, local_var a une portée de fonction à l'intérieur de la fonction func(), nous ne pouvons donc pas y accéder en dehors de celle-ci.
Exemple
Dans cet exemple, nous avons créé la fonction func(). Dans la fonction func(), nous avons défini la variable local_var avec une portée locale, ce qui signifie que nous ne pouvons y accéder qu'à l'intérieur de la fonction func(). Nous pouvons voir que si nous essayons d'accéder à local_var en dehors de la fonction func(), une erreur est générée car local_var n'est pas défini. Pour voir cette erreur, vous devez ouvrir une console.
<html>
<body>
<h2>Defining a variable with <i> function </i> scope</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
function func() {
let local_var = 20;
output.innerHTML += "The value of local_var inside fucntion: " + local_var + "<br/>";
}
func();
// the local_var can't be accessed here
output.innerHTML += "The value of local_var outside fucntion: " +local_var+ "<br/>";
</script>
</body>
<html>
Gamme de blocs
En JavaScript, nous pouvons utiliser deux accolades ({ ….. }) pour définir des blocs. La portée du bloc signifie que toute variable que nous définissons dans un bloc particulier n'est accessible qu'à l'intérieur du bloc et non à l'extérieur du bloc. Les variables déclarées à l'aide des mots-clés let et const ont une portée de bloc.
Grammaire
Les utilisateurs peuvent suivre la syntaxe ci-dessous pour comprendre la portée du bloc des variables.
{
let block_var = 6707;
// block_var accessible here
}
// we can't access the block_var variable here.
Ici, nous ne pouvons pas accéder à block_var en dehors des accolades car nous l'avons défini à l'intérieur d'un bloc spécifique.
Remarque - Les variables déclarées à l'aide du mot-clé var n'ont pas de portée de bloc.
Exemple
Dans cet exemple, nous avons défini un bloc à l'aide d'accolades et défini une variable num. Nous essayons d'accéder à cette variable à l'intérieur et à l'extérieur du bloc. Vous pouvez observer que nous ne pouvons pas accéder à num en dehors des accolades car nous l'avons défini à l'intérieur du bloc.
<html>
<body>
<h2>Defining the variable with <i> block </i> scope </h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
{
const num = 200;
output.innerHTML += "Value of num inside the block: " + num + "<br>";
}
// num is accessible here - outside the block
output.innerHTML += "value of num outside the block: " + num + "<br>";
</script>
</body>
</html>
portée lexicale
La portée lexicale est la même que la portée statique. En JavaScript, lorsque nous exécutons une fonction imbriquée et essayons d'accéder à n'importe quelle variable à l'intérieur de la fonction imbriquée, il trouve d'abord la variable dans le contexte local. S'il ne trouve pas la variable dans le contexte local de la fonction imbriquée, il essaie de la trouver dans le contexte parent d'exécution de la fonction, et ainsi de suite. Enfin, si la variable n'est pas trouvée dans le contexte global, elle est considérée comme indéfinie.
Grammaire
Les utilisateurs peuvent suivre la syntaxe ci-dessous pour comprendre la portée lexicale.
var parent_var = 343;
var test = function () {
console.log(parent_var);
};
test();
Dans la syntaxe ci-dessus, nous avons accédé à parent_var depuis la portée de l'exécution de la fonction. Puisque la fonction log() ne trouvera pas parent_var dans la portée locale, elle essaiera de la trouver dans la portée où la fonction a été appelée (c'est-à-dire la portée globale).
Exemple
Dans cet exemple, nous avons défini la fonction test() et la fonction nested() à l'intérieur. De plus, nous accédons à global_var et parent_var dans la fonction nested(). Puisque JavaScript ne trouvera pas ces deux variables dans le contexte local, il cherchera d'abord dans le contexte d'exécution de la fonction nested() puis dans le contexte d'exécution de la fonction test().
<html>
<body>
<h2>Defining the variables with <i> lexical </i> scope</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
var global_var = 576505;
var test = function () {
var parent_var = 343;
var nested = function () {
output.innerHTML += "The value of parent_var: " + parent_var + "<br/>";
output.innerHTML += "The value of global_var: " + global_var + "<br/>";
};
nested();
};
test();
</script>
</body>
</html>
Chaîne de portée
Comme l'indique le terme chaîne de portée, il s'agit d'une chaîne de portée. Par exemple, supposons que nous définissions une fonction imbriquée dans une fonction. Dans ce cas, sa portée peut être locale et les variables déclarées à l'intérieur de la fonction imbriquée ne sont pas accessibles dans la fonction externe.
Nous créons donc une chaîne de portée ; c’est pourquoi nous l’appelons une chaîne de portée.
Grammaire
Les utilisateurs peuvent suivre la syntaxe ci-dessous pour comprendre la chaîne de portée.
function outer() {
function inner() {
// inner’s local scope.
// we can access variables defined inside the outer() function as inner is inside the local scope of outer
}
// variables defined in the inner() function, can’t be accessible here.
}
Exemple
Dans cet exemple, la fonction inner() est dans la portée de la fonction external(), ce qui signifie que nous ne pouvons pas appeler la fonction inner() en dehors de la fonction external(). La fonction inner() crée la chaîne de portée à l’intérieur de la fonction external().
<html>
<body>
<h2>Scope Chain in JavaScript </i></h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function outer() {
var emp_name = "Shubham!";
function inner() {
var age = 22;
output.innerHTML += ("The value of the emp_name is " + emp_name) +"<br/>";
output.innerHTML += "The value of the age is " + age;
}
inner();
// age can't be accessible here as it is the local scope of inner
}
outer();
</script>
</body>
</html>
在本教程中，我们讨论了 JavaScript 中的作用域和作用域链。我们讨论了全局、局部/函数、块和词法作用域。在上一节中，我们了解了作用域链在 Javascript 中的工作原理。
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
10 façons d'augmenter instantanément vos performances jQuerres
Mar 11, 2025 am 12:15 AM
Cet article décrit dix étapes simples pour augmenter considérablement les performances de votre script. Ces techniques sont simples et applicables à tous les niveaux de compétence. Restez à jour: utilisez un gestionnaire de packages comme NPM avec un bundler comme Vite pour vous assurer
Utilisation du passeport avec séquelle et mysql
Mar 11, 2025 am 11:04 AM
Sequelize est un ORM Node.js basé sur les promesses. Il peut être utilisé avec PostgreSQL, MySQL, MARIADB, SQLITE et MSSQL. Dans ce tutoriel, nous implémenterons l'authentification pour les utilisateurs d'une application Web. Et nous utiliserons Passport, l'authentification populaire Middlew
Comment construire un simple curseur jQuery
Mar 11, 2025 am 12:19 AM
Cet article vous guidera pour créer un carrousel d'image simple à l'aide de la bibliothèque JQuery. Nous utiliserons la bibliothèque BXSLider, qui est construite sur jQuery et offre de nombreuses options de configuration pour configurer le carrousel. De nos jours, Picture Carrousel est devenue une fonctionnalité incontournable sur le site Web - une image vaut mieux que mille mots! Après avoir décidé d'utiliser le carrousel d'image, la question suivante est de savoir comment la créer. Tout d'abord, vous devez collecter des images de haute qualité et haute résolution. Ensuite, vous devez créer un carrousel d'image en utilisant HTML et un code JavaScript. Il existe de nombreuses bibliothèques sur le Web qui peuvent vous aider à créer des carrousels de différentes manières. Nous utiliserons la bibliothèque BXSLider open source. La bibliothèque Bxslider prend en charge la conception réactive, de sorte que le carrousel construit avec cette bibliothèque peut être adapté à n'importe quel
