Explication détaillée de l'utilisation de la portée dans js

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de js scope. Quelles sont les précautions lors de l'utilisation de js scope. Voici des cas pratiques, jetons un coup d'œil.

JavaScript est désormais utilisé par de nombreuses personnes. Concernant l'utilisation de JavaScript, de nombreuses personnes ne sont peut-être pas très claires sur la portée et la portée au niveau du bloc. Voici un article pour vous donner une explication détaillée. jetez un œil ensemble si vous en savez plus.

1. Description de la portée au niveau du bloc

Avant d'apprendre la portée des variables JavaScript, nous devons clarifier quelques points :

a. La portée variable de JavaScript est basée sur sa chaîne de portée unique.

b. JavaScript n'a pas de portée au niveau du bloc.

c. Les variables déclarées dans la fonction sont définies tout au long de la fonction.

La portée variable de javascript est différente du langage de type C couramment utilisé, comme le code en C# :

static void Main(string[] args)
{
   if(true)
   {
    int number=10;
   }
  Console.WriteLine(number);
}

Ce code ne peut pas être compilé car "le numéro n'existe pas dans le contexte actuel".

Parce que la portée de la variable ici est limitée par des accolades, elle est appelée portée au niveau du bloc.

Dans la portée au niveau du bloc, toutes les variables se trouvent entre les accolades de la définition. Elles peuvent être utilisées dans la plage allant du début de la définition à la fin des accolades. Elles sont inaccessibles en dehors de cette plage, c'est-à-dire <.>

if（true）
{
  int number=10;
  Console.WriteLine(number);
}

Ceci est accessible car la variable est définie et utilisée entre les mêmes accolades.

Mais il n'y a pas de concept de portée au niveau du bloc en JavaScript.

2. Portée en javascript

1. La fonction limite la portée de la variable

En JavaScript, les variables définies dans une fonction sont accessibles à l'intérieur de la fonction, mais ne sont pas accessibles en dehors de la fonction Code :

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>

. Lorsque le code est en cours d'exécution, une exception sera levée. Le numéro de variable n'est pas défini car les variables définies dans la fonction ne peuvent pas être utilisées en dehors de la fonction. Elles peuvent être utilisées arbitrairement dans la fonction, même avant l'affectation :

.

<script type="text/javascript">
 var num=function(){
    alert(number);
    var number=10;
    alert(number);
 };
 try{
   num();
 }catch(e){
  alert(e);
 }
</script>

Une fois ce code exécuté, aucune erreur ne sera générée. Il apparaîtra deux fois, à savoir indéfini et 10

. 2. Le sous-domaine accède au domaine parent

Une fonction peut limiter la portée d'une variable, alors la fonction dans la fonction est un sous-domaine de la portée. Le code du sous-domaine peut accéder aux variables du domaine parent. Le code est le suivant :

<.> Le résultat de l'exécution de ce code est 10, mais le code accédant au domaine parent dans le sous-domaine est également conditionnel

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      alert(num);
    };
   sub_func();
};
func();
</script>

Ce code a un "var num=20;" de plus que le précédent. Ce code est dans le sous-domaine, donc la situation du sous-domaine accédant au domaine parent a changé. Le résultat imprimé par ce code est 20. le sous-domaine Le numéro accédé est une variable du domaine enfant, pas du domaine parent. On peut voir qu'il existe certaines règles d'accès lors de l'utilisation de variables en JavaScript, l'interpréteur JavaScript recherche d'abord la définition de la variable dans la portée actuelle. Si c'est le cas, utilisez cette variable. Sinon, recherchez la variable dans la portée actuelle. domaine parent. , et ainsi de suite, jusqu'à ce que la portée de niveau supérieur soit toujours introuvable, une exception « la variable n'est pas définie » sera levée. Le code est le suivant :

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      var num=20;
      alert(num);
    };
   sub_func();
};
func();
</script>

. Une fois ce code exécuté, 20 sera imprimé. Si "

<script type="text/javascript">
 (function (){
   var num=10;
   (function (){
     var num=20;
     (function(){
     alert(num);
      })();
   })();
  })();
</script>

" est supprimé, alors 10 sera imprimé. De plus, si "

" est supprimé, une erreur non définie se produira. var num=20var num=10 Présentons la portée JS et la portée au niveau du bloc

La portée est toujours la chose la plus importante dans tout

langage de programmation

, car elle contrôle la visibilité et le cycle de vie des variables et des paramètres. En parlant de cela, comprenez d'abord deux concepts : la portée au niveau du bloc et la portée de la fonction. Qu’est-ce que la portée au niveau du bloc ?

Tout ensemble d'instructions entre accolades ({ et }) appartient à un bloc, et toutes les variables qui y sont définies sont invisibles en dehors du bloc de code.

La portée de la fonction est facile à comprendre (*^^*). Les paramètres et variables définis dans la fonction ne sont pas visibles en dehors de la fonction.

La plupart des langages de type C ont une portée au niveau des blocs, mais pas JS. Veuillez consulter la démo ci-dessous :

//C语言 
#include <stdio.h> 
void main() 
{ 
  int i=2; 
  i--; 
  if(i) 
  { 
    int j=3; 
  } 
  printf("%d/n",j); 
}

运行这段代码，会出现“use an undefined variable:j”的错误。可以看到，C语言拥有块级作用域，因为j是在if的语句块中定义的，因此，它在块外是无法访问的。 

而JS是如何表现的呢，再看另一个demo:

functin test(){ 
 for(var i=0;i<3;i++){   
 } 
 alert(i); 
} 
test();

运行这段代码，弹出"3"，可见，在块外，块中定义的变量i仍然是可以访问的。也就是说，JS并不支持块级作用域，它只支持函数作用域，而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

那么我们该如何使JS拥有块级作用域呢？是否还记得，在一个函数中定义的变量，当这个函数调用完后，变量会被销毁，我们是否可以用这个特性来模拟出JS的块级作用域呢？看下面这个DEMO：

  function test(){ 
 (function (){ 
 for(var i=0;i<4;i++){ 
 } 
 })(); 
 alert(i); 
} 
test();

这时候再次运行，会弹出"i"未定义的错误，哈哈，实现了吧~~~这里，我们把for语句块放到了一个闭包之中，然后调用这个函数，当函数调用完毕，变量i自动销毁，因此，我们在块外便无法访问了。

JS的闭包特性is the most important feature((*^^*) 大家懂的)。在JS中，为了防止命名冲突，我们应该尽量避免使用全局变量和全局函数。那么，该如何避免呢？不错，正如上文demo所示，我们可以把要定义的所有内容放入到一个

（function (){ 
//内容 
})();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS+canvas做出围绕旋转动画

JS实现五子棋小游戏

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!