Explication du levage JavaScript

Question

Quelle est la différence entre les snippets ci-dessous ?

var a = 0;
function b(){
    a = 10;
    return function a(){};
}
b();
console.log(a);  // => 10

y

var a = 0;
function b(){
    a = 10;
    return
    function a(){};
}
b();
console.log(a);  // => 0

Cela a quelque chose à voir avec le levage JavaScript, mais ma compréhension du concept donne exactement le résultat inverse.

Answer 1

return function a(){};

Ici function ... est une expression. A expression de fonction nommée pour être précis. Le site a ici n'a pas beaucoup d'importance, il donne juste à la fonction anonyme un .name mais c'est toujours une expression de fonction que vous retournez.

return 
function a(){};

Ceci est équivalent à :

return;
function a(){};

Ici function a est une déclaration, pas une expression. Elle est hissée, créant un nom local a dans le champ d'application, faisant de l'ombre à l'extérieur a . C'est-à-dire qu'il est équivalent à :

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

Answer 2

return
function a() {}

est identique à

return;
function a() {}

après l'insertion automatique du point-virgule. Dans le second cas, la fonction a est déplacé vers le haut de sa portée. Le code est le même que

var a = 0;

function b() {
  function a() {};
  a = 10;
  return;
}
b();
console.log(a);

Comme a à l'intérieur de b() est une fonction interne et ensuite surchargée, elle n'est pas accessible depuis l'extérieur de l'application b() .

Voici la démo pour comprendre comment le levage fonctionne.

var a = 0;

function b() {
  console.log(a); // function
  a = 10;
  console.log(a); // 10
  return

  function a() {};
}
console.log(b()); // undefined
console.log(a);

Answer 3

Saut de ligne peut être utilisé à la place de point-virgule .

Ce site :

var a = 0;
function b(){
    a = 10;
    return // line-break
    function a(){};
}
b();
console.log(a);  // => 0

signifie ceci :

var a = 0;
function b(){
    a = 10;
    return; // <-- 'adds this semicolon'
    function a(){};
}
b();
console.log(a);  // => 0

Si vous besoin de ce Saut de ligne vous pouvez faire comme este :

var a = 0;
function b(){
    a = 10;
    return (
        function a(){}
    )
}
b();
console.log(a);

Answer 4

Supposons.

Vous jouez au cricket. Le lanceur est en route et vous venez de frapper votre batte en l'air.

Serait-il abattu ? Non !

Donc si nous supposons Hoisting es cricket Par conséquent, il n'y a aucun sens à frapper la balle tant que le lanceur ne la lance pas.

Exemple rapide :

Hissé

console.log('batsman hit but ', ballStatus()); // batsman hit but  true

function ballStatus() {
    return true;
}

Non-Hoisted

 console.log('batsman hit but ', ballStatus()); // Uncaught TypeError: ballStatus is not a function

 var ballStatus = function() {
    return true;
 }