Maison > interface Web > js tutoriel > Explication détaillée de la différence entre la portée et la portée au niveau du bloc en Javascript

Explication détaillée de la différence entre la portée et la portée au niveau du bloc en Javascript

亚连
Libérer: 2018-06-21 17:54:24
original
1217 Les gens l'ont consulté

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. Permettez-moi de vous présenter la portée et la portée au niveau du bloc en Javascript. Les amis qui en ont besoin peuvent s'y référer

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

Avant d'apprendre la portée variable de 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é. Par exemple, le code en C# :

static void Main(string[] args)
{
   if(true)
   {
    int number=10;
   }
  Console.WriteLine(number);
}
Copier après la connexion
Ce code ne peut pas être compilé car "actuellement Nombre".

n'existe pas dans le contexte. 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 ne sont pas accessibles à l'extérieur. cette plage, c'est-à-dire

if(true)
{
  int number=10;
  Console.WriteLine(number);
}
Copier après la connexion
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. Portée des variables limitée par la fonction

En javascript, à l'intérieur de la fonction Les variables définies est accessible à l'intérieur de la fonction, mais n'est pas accessible en dehors de la fonction Code :

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>
Copier après la connexion
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 il est défini dans le fichier. fonction. Les variables dans ne peuvent plus être utilisées en dehors de la fonction, mais 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>
Copier après la connexion
Une fois ce code exécuté, aucune erreur ne sera générée, et 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 du scope. Le code du sous-domaine peut accéder aux variables du domaine parent. Le code est le suivant :

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      alert(num);
    };
   sub_func();
};
func();
</script>
Copier après la connexion
Le résultat de l'exécution de ce code est 10, mais il y a des conditions d'accès. le code du domaine parent dans le sous-domaine.

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      var num=20;
      alert(num);
    };
   sub_func();
};
func();
</script>
Copier après la connexion
Ce code a un "var num=20;" de plus que le précédent. Ce code est dans le sous-domaine, donc la situation d'accès du sous-domaine. le domaine parent a changé. Ce code imprime Le résultat est 20. À l'heure actuelle, le numéro accédé par le sous-domaine est une variable du sous-domaine, 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">
 (function (){
   var num=10;
   (function (){
     var num=20;
     (function(){
     alert(num);
      })();
   })();
  })();
</script>
Copier après la connexion
Une fois ce code terminé. exécuté, 20 sera imprimé. Si "

"Supprimez-le, alors la valeur imprimée sera 10. Supprimez également "var num=20", et une erreur non définie se produira. var num=10

Ce qui suit est une introduction à 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 Heavy. car il 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. 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); 
}
Copier après la connexion
Lorsque vous exécutez ce code, l'erreur "utiliser une variable non définie :j" apparaîtra. Comme vous pouvez le voir, le langage C a une portée au niveau du bloc, car j est défini dans le bloc d'instruction if, il est donc inaccessible en dehors du bloc.

Comment se comporte JS ? Regardons une autre démo :

functin test(){ 
 for(var i=0;i<3;i++){   
 } 
 alert(i); 
} 
test();
Copier après la connexion
Lorsque vous exécutez ce code, "3" apparaît. On peut voir qu'en dehors du bloc, les variables définies. dans le bloc i est toujours accessible. En d'autres termes, JS ne prend pas en charge la portée au niveau du bloc, il prend uniquement en charge la portée de la fonction et les variables définies n'importe où dans une fonction sont visibles n'importe où dans la fonction.

Alors, comment pouvons-nous faire en sorte que JS ait une portée au niveau du bloc ? Vous souvenez-vous encore que les variables définies dans une fonction seront détruites lorsque la fonction est appelée ? Pouvons-nous utiliser cette fonctionnalité pour simuler la portée au niveau du bloc de JS ? Jetez un œil à la DÉMO ci-dessous :

  function test(){ 
 (function (){ 
 for(var i=0;i<4;i++){ 
 } 
 })(); 
 alert(i); 
} 
test();
Copier après la connexion

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

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

(function (){ 
//内容 
})();
Copier après la connexion

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用nginx + node如何部署https

在JavaScript中如何实现AOP

在mongoose中有关于更新对象的详细介绍

在JS函数中有关setTimeout详细介绍

使用jquery如何实现侧边栏左右伸缩效果

在Vue中如何实现数字输入框组件

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!

Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal