Maison >interface Web >js tutoriel >Explication des étendues et des chaînes de portées en JavaScript
Explication des étendues et des chaînes de portées en JavaScript
- PHPzavant
- 2023-09-07 09:25:02993parcourir
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript