La fonction Javascript de délimitation de l'étendue et de levage

Je viens de lire un excellent article sur JavaScript délimitation de l'étendue et de Levage par Ben Cerise dans laquelle il donne l'exemple suivant:

var a = 1;

function b() {
    a = 10;
    return;

    function a() {}
}
b();
alert(a);

À l'aide du code ci-dessus, le navigateur vous alerte en "1".

Je ne sais toujours pas pourquoi elle renvoie la valeur "1". Certaines des choses qu'il dit me viennent à l'esprit comme:
Toutes les déclarations de fonction sont hissés au sommet. Vous pouvez la portée d'une variable à l'aide de la fonction. Ne cliquez pas pour moi.

OriginalL'auteur dev.e.loper | 2011-09-21

  1. 107

    Fonction de levage signifie que les fonctions sont déplacés vers le haut de leur champ d'application. C'est,

    function b() {  
   a = 10;  
   return;  
   function a() {} 
}

    sera réécrit par l'interprète de cette

    function b() {
  function a() {}
  a = 10;
  return;
}

    Bizarre, hein?

    Aussi, dans ce cas,

    function a() {}

    se comportaient de la même que

    var a = function () {};

    Donc, en substance, c'est ce que fait le code:

    var a = 1;                 //defines "a" in global scope
function b() {  
   var a = function () {}; //defines "a" in local scope 
   a = 10;                 //overwrites local variable "a"
   return;      
}       
b();       
alert(a);                 //alerts global variable "a"
    De sorte que toutes les déclarations de fonction sont affectés à une variable?
    Oui, en Javascript, les fonctions sont des objets de première classe, tout comme les chaînes et les nombres. Cela signifie qu'ils sont définis comme des variables et peuvent être transmis à d'autres fonctions, être stockées dans des tableaux, et ainsi de suite.
    N'est en aucune façon le corps de la fonction "réécrit". Les différents ECMAScript normes clairement état de cette variable et les déclarations de fonction sont traitées avant l'exécution de code commence. C'est, , rien n'est déplacé, c'est sur ordre de l'exécution (d'où mon aversion pour le terme "levage", qui déduit de mouvement ou de restructuration). Dans votre ré–écrit le code, la déclaration var a devrait être avant la déclaration de la fonction, et la cession a = 1 devrait l'être après. Mais notez que ce n'est pas spécifiée pour effectivement se produire par l'analyseur, tokeniser, un interprète, un compilateur, que ce soit, c'est juste un équivalent.
    Bien sûr, je suppose que vous pourriez appeler la description d'un petit "tromper" les enfants", mais à la fin, le comportement est le même, si le code est littéralement réarrangés ou tout simplement l'ordre d'exécution est réarrangé. Ce qui se passe réellement derrière les scènes, c'est plus d'une préoccupation académique, et peut-être même dépendant de l'implémentation.
    “Aussi, dans ce cas, function a() {} se comportaient de la même que var a = function () {};” — c'est incorrect de deux façons: tout d'abord, si quoi que ce soit, il aurait été var a = function a() {}; (la fonction n'est pas réellement anonyme), la seconde, ces deux formes ne sont pas interchangeables, car à partir de var a = function a() {}; seulement la var a; partie aurait été hissé. Le a = function a() {}; partie aurait toujours été derrière l'instruction return. Parce que la forme originale est une déclaration de fonction et non pas une expression de fonction, elle est hissé dans son ensemble.

    OriginalL'auteur Peter Olson

  2. 6

    Ce que vous devez retenir, c'est qu'il analyse l'ensemble de la fonction et résout toutes les déclarations de variables avant de l'exécuter. Donc....

    function a() {}

    devient vraiment 

    var a = function () {}

    var a forces dans une portée locale, et de la portée des variables est par le biais de l'ensemble de la fonction, de sorte que le mondial une variable est encore de 1 parce que vous avez déclaré dans une portée locale par en faire une fonction.

    OriginalL'auteur kemiller2002

  3. 5

    La fonction a est hissé à l'intérieur de la fonction b:

    var a = 1; 
function b() { 
   function a() {} 
   a = 10; 
   return;
} 
b(); 
alert(a);

    qui est presque comme l'utilisation de var:

    var a = 1; 
function b() { 
   var a = function () {};
   a = 10; 
   return;
} 
b(); 
alert(a);

    La fonction est déclarée localement, et la mise a arrive seulement dans le domaine local et non global var.

    cette ligne "var a = function () {};" rend chaque chose au clair.. en gros JavaScript est le langage de programmation dynamique et de "fonction" est aussi un objet en JavaScript.

    OriginalL'auteur Digital Plane

  4. 3
    1. déclaration de fonction function a(){} est hissée à la première et il se comporte comme var a = function () {};, de là, dans une portée locale a est créé.
    2. Si vous avez deux variables avec le même nom (l'un en mondial de un autre en local), la variable locale toujours obtenir la priorité sur la variable globale.
    3. Lorsque vous définissez a=10, vous définissez la variable locale a , pas le mondial.

    Par conséquent, la valeur de la variable globale reste la même et que vous obtenez, alerté 1

    OriginalL'auteur KhanSharp

  5. 1

    function a() { } est une instruction de fonction, ce qui crée un a variable locale à la b fonction.

    Les Variables sont créées lorsqu'une fonction est analysée, indépendamment du fait que le var fonction ou instruction est exécutée.

    a = 10 définit cette variable locale.

    en fait a = 10 définit une variable dans le global portée lorsque la fonction b est exécutée, sauf si vous ajoutez "use strict" (dans de tels environnements que le soutien que la directive).
    Non, parce que l'instruction de fonction crée un identifiant local.
    ... et .... vous avez raison. N'avais pas réalisé qu'conséquence particulière de la fonction de levage. Merci!

    OriginalL'auteur SLaks

  6. 1

    Quelle est la pomme de discorde dans ce petit extrait de code?

    Cas 1:

    Inclure function a(){} définition à l'intérieur du corps de function b comme suit. logs value of a = 1

    var a = 1;
function b() {
  a = 10;
  return;

  function a() {}
}
b();
console.log(a); //logs a = 1

    Cas 2

    Exclure function a(){} définition à l'intérieur du corps de function b comme suit. logs value of a = 10

    var a = 1;
function b() {
  a = 10;  //overwrites the value of global 'var a'
  return;
}
b();
console.log(a); //logs a = 10

    Observation vous aidera à réaliser que la déclaration console.log(a) journaux les valeurs suivantes.

    Cas 1 : a = 1

    Cas 2 : a = 10

    Postule

    1. var a a été défini et déclaré lexicalement dans la portée globale.
    2. a=10 Cette déclaration est de la réattribution de la valeur à 10, lexicalement se trouve à l'intérieur de la fonction b.

    Explication de deux cas

    En raison de function definition with name property un est la même que la variable a. Le variable a à l'intérieur de la function body b devient une variable locale. La ligne précédente implique que la valeur globale d'un reste intacte et le local de la valeur de a est mis à jour à 10.

    Donc, ce que nous voulons dire, c'est que le code ci-dessous

    var a = 1;
function b() {
  a = 10;
  return;

  function a() {}
}
b();
console.log(a); //logs a = 1

    Il est interprété par la JS interprète comme suit.

    var a = 1;
function b() {
  function a() {}
  a = 10;
  return;


}
b();
console.log(a); //logs a = 1

    Cependant, quand on enlève le function a(){} definition, le value of 'a' déclarées et définies en dehors de la fonction b, cette valeur est écrasée et passe à 10 dans le cas 2. La valeur est écrasée parce que a=10 se réfère à la déclaration mondiale et si elle venait à être déclarée localement, nous devons avoir écrit var a = 10;. 

    var a = 1;
function b() {
  var a = 10; //here var a is declared and defined locally because it uses a var keyword. 
  return;
}
b();
console.log(a); //logs a = 1

    Nous pouvons clarifier notre doute davantage par l'évolution de la name property dans function a(){} definition à un autre nom que 'a'

    var a = 1;
function b() {
  a = 10; //here var a is declared and defined locally because it uses a var keyword. 
  return;

  function foo() {}
}
b();
console.log(a); //logs a = 1

    OriginalL'auteur Sagar Munjal

  7. 1

    De levage est un concept fait pour nous, pour le rendre plus facile à comprendre. Ce qui se produit, les déclarations sont faites de la première à l'égard de leurs champs d'application et les affectations qui va arriver par la suite(pas en même temps).

    Lorsque les déclarations arriver, var a, puis function b et à l'intérieur qu' b portée, function a est déclarée.

    Cette fonction d'une volonté de l'ombre, la variable de l'un venant de la portée globale.

    Après les déclarations sont faites, les valeurs attribuer va commencer, le mondial a obtenez la valeur 1 et de l'un à l'intérieur de function b obtiendrez 10.
    lorsque vous ne alert(a), il va appeler la véritable portée mondiale variable.
    Cette petite modification dans le code sera plus clair 

            var a = 1;

    function b() {
        a = 10;
        return a;

        function a() { }
    }

    alert(b());
    alert(a);
    Il est curieux que tant d'experts, même dans un cours à codeschool.com se réfère à de levage qui n'est rien de plus qu'une vision simpliste de ce qui se passe, en fait de levage ne pas se produire du tout. Réf: 1) developer.mozilla.org/en-US/docs/Glossary/Hoisting 2) du Chapitre 5 des Secrets de l'JavaScript Ninja 2/e par john resig, ours bebeault, josip maras

    OriginalL'auteur Buzzzzzzz

  8. 0

    Il se passe parce que le nom de la Variable est la même que le nom de la fonction signifie "un".
    Ainsi, en raison de Javascript de levage essayer de résoudre le conflit de noms et il sera de retour a = 1.

    J'ai été aussi confus au sujet de ce jusqu'à ce que j'ai lu ce post sur "JavaScript de Levage" http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html

    Espère que cela aide.

    OriginalL'auteur AugustRush

  9. 0

    Voici mon récapitulatif de la réponse avec plus d'annotation et d'un acompaniying violon pour jouer avec.

    //hoisting_example.js

//top of scope ie. global var a = 1
var a = 1;

//new scope due to js' functional (not block) level scope
function b() {
    a = 10; //if the function 'a' didn't exist in this scope, global a = 10
  return; //the return illustrates that function 'a' is hoisted to top
  function a(){}; //'a' will be hoisted to top as var a = function(){};
}

//exec 'b' and you would expect to see a = 10 in subsequent alert
//but the interpreter acutally 'hoisted' the function 'a' within 'b' 
//and in doing so, created a new named variable 'a' 
//which is a function within b's scope
b();

//a will alert 1, see comment above
alert(a);

    https://jsfiddle.net/adjavaherian/fffpxjx7/

    OriginalL'auteur 4m1r

  10. 0

    De levage En JavaScript moyens, les déclarations de variables sont exécutées par le programme avant le code est exécuté. Par conséquent, la déclaration d'une variable n'importe où dans le code est équivalent à déclarer au début.

    OriginalL'auteur Vishwas S L

  11. 0

    Ses tout dépend de la portée de la variable 'a'. Laissez-moi vous expliquer en créant des étendues comme des images.

    Ici JavaScript permettra de créer de 3 étendues.

    i) portée Globale.
    ii) la Fonction b ().
    iii) la Fonction a ().

    La fonction Javascript de délimitation de l'étendue et de levage

    Son clair lorsque vous appelez "alerte" la portée de la méthode appartient Mondial de l'époque, afin qu'il reconnaisse la valeur de la variable 'a' à partir de portée Mondiale sont à seulement 1.

    OriginalL'auteur Sumit Pahuja

  12. 0

    De levage est un comportement concept de JavaScript. De levage (dire le déplacement) est un concept qui explique comment et où les variables doivent être déclarées.

    En JavaScript, une variable peut être déclarée après qu'il a été utilisé parce que les déclarations de Fonction et les déclarations de variables sont toujours déplacés (“hissé”) de manière invisible pour le haut de leur contenant portée par l'interpréteur JavaScript.

    Nous rencontrons deux types de levage dans la plupart des cas.

    1.La déclaration de la Variable de levage

    Permet de comprendre ce par ce morceau de code.

     a = 5; //Assign 5 to a
 elem = document.getElementById("demo"); //Find an element 
 elem.innerHTML = a;                     //Display a in the element
 var a; //Declare a
  //output-> 5

    Ici la déclaration de la variable a sera hébergé à haut invisible par l'interpréteur javascript au moment de la compilation. Nous avons donc été en mesure d'obtenir la valeur de un. Mais cette approche de la déclaration de variables n'est pas recommandé que nous devrions déclarer des variables à haut déjà comme ça.

     var a = 5; //Assign and declare 5 to a
 elem = document.getElementById("demo"); //Find an element 
 elem.innerHTML = a;                     //Display a in the element
  //output -> 5

    envisager un autre exemple.

      function foo() {
     console.log(x)
     var x = 1;
 }

    est en fait interprété comme ceci:

      function foo() {
     var x;
     console.log(x)
     x = 1;
  }

    Dans ce cas x ne sera pas défini

    Il n'a pas d'importance si le code est exécuté, qui contient la déclaration de la variable. Considérons cet exemple.

      function foo() {
     if (false) {
         var a = 1;
     }
     return;
     var b = 1;
  }

    Cette fonction s'avère être comme ça.

      function foo() {
      var a, b;
      if (false) {
        a = 1;
     }
     return;
     b = 1;
  }

    Dans la déclaration de la variable seule définition de la variable des grues, pas la cession.

    1. Déclaration de fonction de levage

    À la différence de la variable de levage le corps de la fonction ou de la valeur attribuée à l'seront également hissé. Considérer ce code

     function demo() {
     foo(); //this will give error because it is variable hoisting
     bar(); //"this will run!" as it is function hoisting
     var foo = function () {
         alert("this would not run!!");
     }
     function bar() { 
         alert("this will run!!");
     }
 }
 demo();

    Maintenant que nous avons compris à la fois variable et la fonction de levage, nous allons comprendre ce code maintenant.

    var a = 1;
function b() {
  a = 10;
  return;
   function a() {}
}
b();
alert(a);

    Ce code sera comme ceci. 

    var a = 1;                 //defines "a" in global scope
 function b() {  
   var a = function () {}; //defines "a" in local scope 
    a = 10;                 //overwrites local variable "a"
    return;      
 }       
 b();       
 alert(a);

    La fonction a() ont une portée locale à l'intérieur de b(). un() va être déplacé vers le haut tandis que l'interprétation du code par sa définition (seulement dans le cas de la fonction de levage) et maintenant ont une portée locale et n'aura donc pas d'incidence sur la portée globale de l'un, tout en ayant son propre champ à l'intérieur de la fonction b().

    OriginalL'auteur Must Keem J

  13. 0

    Curieusement, aucune des réponses ici parler de la pertinence du Contexte d'Exécution dans le Champ d'application de la Chaîne.

    Le Moteur JavaScript encapsule le code en cours d'exécution dans un Contexte d'Exécution. La base de contexte d'exécution global du Contexte d'Exécution. Chaque fois qu'une nouvelle fonction est appelée, un nouveau Contexte d'Exécution est créé et mis sur la Pile d'Exécution. Pensez à un Cadre de Pile assis sur une Invocation de la Pile dans d'autres langages de programmation. Last in first out. Désormais, à chaque Contexte d'Exécution dispose de sa propre Variable de l'Environnement et de l'Environnement Extérieur en JavaScript.

    Je vais utiliser l'exemple ci-dessous comme une démonstration.

    1) tout d'Abord, nous entrons dans la Phase de Création de la global du Contexte d'Exécution. À la fois l'Extérieur de l'Environnement et de la Variable d'Environnement de l'Environnement Lexical sont créés. L'Objet Global de la configuration, et placé dans la mémoire de la variable spéciale 'ce' pointant vers elle. La fonction de a et de son code et de la variable mavar avec une valeur non définie sont mis en mémoire dans la Variable globale de l'Environnement. il est important de noter que la fonction d'un code n'est pas exécuté. Il est simplement placé dans la mémoire avec la fonction.

    2) la Deuxième, c'est la Phase d'Exécution du Contexte d'Exécution. myVar n'est plus une valeur non définie. Il est initialisé avec la valeur 1, qui est stocké dans la Variable globale de l'Environnement. La fonction est appelée et un nouveau Contexte d'Exécution est créé.

    3) En fonction du Contexte d'Exécution, il passe par la Création et l'Exécution de la Phase de son propre Contexte d'Exécution. Il dispose de son propre Environnement Extérieur et de la Variable d'Environnement, ainsi son propre Environnement Lexical. La fonction b et la variable mavar sont stockés dans la Variable d'Environnement. Cette Variable d'Environnement est distincte de la Variable globale de l'Environnement. Puisque la fonction d'un siège lexicalement (physiquement dans le code) sur le même niveau que l'Exécution globale du Contexte, de son Environnement Extérieur est le Contexte d'Exécution global. Ainsi, si la fonction d'une référence à une variable qui n'est pas dans sa Variable d'Environnement, il recherche la Chaîne d'Étendue et d'essayer de trouver la variable dans la Variable d'Environnement de la global du Contexte d'Exécution.

    4) La fonction b est appelée dans la fonction. Un nouveau Contexte d'Exécution est créé. Depuis, elle s'assoie sur le plan lexical en fonction de a, son Environnement Extérieur est un. Alors, quand il fait référence à myVar, depuis myVar est pas dans la fonction b est Variable d'Environnement, il se regarde dans la fonction d'une Variable d'Environnement. Il trouve là-bas et de la console.journal imprime 2. Mais si la variable n'était pas en fonction d'une Variable d'Environnement, puis depuis une fonction Externe de l'Environnement mondial, le Contexte d'Exécution, alors le Champ d'application de la Chaîne va continuer la recherche.

    5) en fonction de b et a terminé l'exécution, ils sont éclatés à partir de la Pile d'Exécution. Le single-threaded Moteur JavaScript continue l'exécution à l'échelle mondiale du Contexte d'Exécution. Il appelle la fonction b. Mais il n'y a pas de b dans la Variable globale de l'Environnement et il n'y a pas d'autre Extérieure de l'Environnement de recherche dans le Contexte d'Exécution global. Ainsi, une exception est générée par le Moteur JavaScript. 

    function a(){
  function b(){
    console.log(myVar);
  }

  var myVar = 2;
  b();
}

var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined

    L'exemple ci-dessous montre l'Étendue de la Chaîne dans l'action. Dans la fonction b du Contexte d'Exécution de la Variable d'Environnement, il n'y a pas de myVar. Donc, il recherche son Environnement Extérieur, ce qui est la fonction d'un. La fonction a n'a pas de myVar dans sa Variable d'Environnement. Ainsi, le Moteur de recherches de la fonction de l'Environnement Extérieur, qui est le Contexte d'Exécution global de l'Environnement Extérieur et myVar y est défini. Par conséquent, la console.journal des impressions 1.

    function a(){
  function b(){
    console.log(myVar);
  }

  b();
}

var myVar = 1;
a();
> 1

    Concernant Contexte d'Exécution et de l'Environnement Lexical associé, y compris l'Environnement Extérieur et de la Variable de l'Environnement, de permettre à l'établissement de la portée des variables en JavaScript. Même si vous appelez la même fonction à plusieurs reprises, pour chaque invocation, il va créer son propre Contexte d'Exécution. De sorte que chaque Contexte d'Exécution va avoir sa propre copie des variables dans la Variable d'Environnement. Il n'y a pas de partage de variables.

    OriginalL'auteur Donato