recherche

Maison >interface Web >js tutoriel >Explication détaillée de la portée et de la fermeture dans les compétences javascript_javascript

Explication détaillée de la portée et de la fermeture dans les compétences javascript_javascript

WBOY
WBOYoriginal
2016-05-16 15:20:051331parcourir

1. Portée JavaScript

Les variables JavaScript n'ont en réalité que deux portées, les variables globales et les variables internes des fonctions. La portée d'une variable (var scope) définie n'importe où dans une fonction est le corps entier de la fonction.
Variables globales : fait référence aux propriétés de l'objet sous l'objet fenêtre.
Division de la portée : basée sur le contexte, divisée par fonctions et non par blocs.
Accent sur deux points :
1. Dans le même domaine, JavaScript permet des définitions répétées de variables, et cette dernière définition écrasera la définition précédente.
2. Si une variable est définie sans ajouter le mot-clé var à l'intérieur d'une fonction, ce sera une variable globale par défaut. 

var scope="global"; 
function t(){ 
  console.log(scope); //"global" 
  scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"local" 




var scope="global"; 
function t(){ 
  console.log(scope); //"undefined" 
  var scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"global"

Dans le processus de résolution variable, la portée locale est d'abord recherchée, puis la portée supérieure est recherchée. La portée de la variable n'est pas définie dans la fonction du premier code, donc la portée supérieure (portée globale) est recherchée et sa valeur est affichée. Cependant, la portée de la variable est définie dans la fonction du deuxième code (peu importe si la variable est définie après la console ou avant, on considère que la portée de la variable est dans cette portée), donc la portée de niveau supérieur n'est plus recherché et la portée est affichée directement. Mais malheureusement, la variable locale i ne reçoit pas de valeur pour le moment, donc la sortie n'est pas définie. 

//所以根据函数作用域的意思，可以将上述第二段代码重写如下： 
var scope="global"; 
function t(){ 
  var scope; 
  console.log(scope); 
  scope="local" 
  console.log(scope); 
} 
t();

En raison des caractéristiques de la portée de la fonction, les variables locales sont toujours définies dans l'ensemble du corps de la fonction. Nous pouvons "avancer" la déclaration des variables en haut du corps de la fonction. 

var b; //第1步 
function fun(){  
  b = "change";  
}  
alert(b);//输出undefined，由于第1步只定义未赋值 
 
 
var b; //第1步 
function fun(){  
  b = "change";  
} 
fun(); //调用上述函数 
alert(b); //输出change

Lors de l'utilisation de var pour déclarer une variable, l'attribut créé n'est pas configurable, ce qui signifie qu'il ne peut pas être supprimé via l'opérateur delete.
2. Instance de portée

<html> 
<head> 
  <script type="text/javascript"> 
    function buttonInit(){ 
      for(var i=1;i<4;i++){ 
        var b=document.getElementById("button"+i); 
        b.addEventListener("click"，function(){ alert("Button"+i);}，false); 
      } 
    } 
    window.onload=buttonInit; 
  </script> 
</head> 
<body> 
  <button id="button1">Button1</button> 
  <button id="button2">Button2</button> 
  <button id="button3">Button3</button> 
</body> 
</html>

Lorsque l'événement d'enregistrement se termine, la valeur de i est 4. Lorsque vous cliquez sur le bouton, la fonction d'événement est function(){ alert("Button" i);} Il n'y a pas de i dans cette fonction anonyme Selon. la chaîne de portée, donc pour la trouver dans la fonction buttonInit À ce moment, la valeur de i est 4, donc "button4" apparaît.
3. fermeture javaScript
En js, les fermetures impliquent principalement plusieurs autres fonctionnalités de js : chaîne de portées, mécanisme de recyclage des déchets (mémoire), imbrication de fonctions, etc.
1. Chaîne de portée : En termes simples, une chaîne de portée est un index créé lorsqu'une fonction est définie pour trouver la valeur d'une variable utilisée. Sa règle interne est de mettre les variables locales de la fonction elle-même au premier plan, de mettre les variables. dans sa propre fonction parent, placez ensuite les variables dans la fonction de niveau supérieur plus en arrière, et ainsi de suite jusqu'à l'objet global. Lorsque la valeur d'une variable doit être interrogée dans une fonction, l'interpréteur js recherchera dans la chaîne de portée, en commençant par la variable locale au début. Si la variable correspondante n'est pas trouvée, il recherchera dans la chaîne de niveau suivant. . Une fois la variable trouvée, ne continuez pas. Si la variable requise n'est pas trouvée à la fin, l'interpréteur renvoie undéfini.
2. Le mécanisme de garbage collection de Javascript : En Javascript, si un objet n'est plus référencé, alors l'objet sera recyclé par GC. Si deux objets font référence l'un à l'autre et ne sont plus référencés par un tiers, alors les deux objets qui font référence l'un à l'autre seront également recyclés. Parce que la fonction a est référencée par b, et b est référencé par c en dehors de a, c'est pourquoi la fonction a ne sera pas recyclée après exécution. Construire une fermeture.Ces variables ne seront pas recyclées par le collecteur de mémoire.Ce n'est que lorsque la fonction interne n'est pas appelée que la fermeture sera détruite, et aucune variable référencée par la fermeture ne sera recyclée par la mémoire suivante.
3. Avec les fermetures, les structures de fonctions imbriquées peuvent fonctionner
4. Utilisez la fermeture js pour implémenter des événements de liaison de boucle

<html> 
<head> 
  <title>闭包</title> 
</head> 
<body> 
  <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
  </ul> 
  <script type="text/javascript"> 
    function tt(nob) { 
      this.clickFunc = function() { 
        alert("这是第" + (nob + 1) + "记录"); 
      } 
    } 
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    for (var i = 0; i<= list_obj.length; i++){ 
      console.log(list_obj[i]) 
      list_obj[i].onmousemove = function(){ 
        this.style.backgroundColor = "#cdcdcd"; 
      } 
      list_obj[i].onmouseout = function() { 
        this.style.backgroundColor = "#FFFFFF"; 
      } 
      //list_obj[i].onclick = function() { 
      // alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录” 
      //} 
      var col = new tt(i); //调用tt函数 
      list_obj[i].onclick = col.clickFunc; //执行clickFunc函数 
    } 
  </script> 
</body> 
</html>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.

Déclaration：
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
Article précédent：Exemple complet d'effet glisser-déposer jquery (avec téléchargement du code source de démonstration)_jqueryArticle suivant：Exemple complet d'effet glisser-déposer jquery (avec téléchargement du code source de démonstration)_jquery

Articles Liés

Voir plus