Code en cours d'exécution après une déclaration de retour en JavaScript?

Question

J'ai trouvé ce court extrait de code JavaScript dans le web:

var foo = 1; 
function bar() { 
    foo = 10; 
    return; 
    function foo() {} 
} 
bar(); 
console.log(foo); 

je me attends le contenu après la déclaration de retour en fonction bar() à dédaigner, et la variable foo à égale 10 à la fin . À ma grande surprise cependant, la console génère quelque chose de très différent:

1 

Maintenant, lorsque je retire la ligne après la déclaration de retour

var foo = 1; 
function bar() { 
    foo = 10; 
    return; 
} 
bar(); 
console.log(foo); 

Les impressions de la console sur, comme prévu:

10 

Quelqu'un peut-il m'expliquer ce qui amène foo à retourner 1 dans l'ancienne version du code?

Answer 1

tl; dr il est dû à la façon dont les expressions de la fonction et la fonction de travail de déclarations (également, levage de fonction): https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

réponse plus détaillée:

Mettre les CONSOLE.LOG suivants est dans le code vous aidera à visualiser ce qui se passe, et je pense répondre à votre question.

var foo = 1; 
console.log('0', foo) 
function bar() { 
    console.log('1', foo) 
    foo = 10; 
    console.log('2', foo) 
    return; 
    console.log('3', foo) 
    function foo() {} 
    console.log('4', foo) 
} 
console.log('5', foo) 
bar(); 
console.log('6', foo) 

La sortie est la suivante:

'0' 1 
'5' 1 
'1' function foo() {} 
'2' 10 
'6' 1 

Alors à vos soupçons, console.log ('3', foo) et console.log ('4', foo) ne sont jamais appelé après la déclaration de retour, qui était attendue. Votre question maintenant est probablement "Pourquoi mon console.log ('1', foo) affecté à la fonction foo() {}", qui peut être répondu par la question suivante SO qui décrit la déclaration de fonction par rapport aux expressions de fonction, c'est-à-dire

function foo(){} 

vs

var foo = function(){} 

Why can I use a function before it's defined in Javascript?

Fondamentalement quand bar est exécuté, la définition immédiate de foo devient function() {}, mais le concept clé ici est cette définition de foo est locale à l'intérieur de la fonction bar(), et en dehors de la portée de bar, il est toujours affecté à 1.

Une autre bonne lecture sur les déclarations de fonctions et les expressions: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

Answer 2

Les déclarations de fonction sont hissées au début de leur contexte conteneur. Vous créez essentiellement un var foo en haut de la fonction bar.

Le foo manipulé dans bar est local pour cette fonction et n'affecte pas le foo du contexte global.

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

Answer 3

Il est dû à hoisting.

compilateur va essentiellement transformer en:

function bar() { 
    function foo() {} 
    foo = 10; 
    return;  
} 

Donc il y a une foo locale avant la cession et vous écrasez que local. La fonction foo() aurait alors disparu.

Answer 4

Cela est dû au fait que le code est converti en; Ceci est dû au fait que JavaScript déplace toujours les déclarations de variables et non les initialisations en haut de la portée.