Javascript Funktion Erklärung und hissen

Question

Ich verbrachte viel Zeit, um herauszufinden, der Grund für falsches Verhalten der Funktion und war wirklich überrascht von meiner Untersuchung Ergebnis.

werde ich alle meine komplizierte Logik komprimieren und wird mit sehr einfachen Beispiel darstellen:

ich einige Testamentsvollstrecker haben:

function run() { 

    //define one more fn inside 
    function render() { 
     //returns execution result 
     return 1; 
    } 

    //I use this execution result 
    console.log(render()); //expect 1, but was 2 

    //here I have lot of code added by other developers 
    //and after some refactoring and code merge was added 
    //one more implementtaion 

    //it was done by accidentally as merge issue 
    function render() { 
     return 2; 
    } 
} 

Meine große Überraschung, dass console.log druckt 2. Erst nachdem ich die zweite Funktion mit dem gleichen Namen erkannt habe, kann ich versuchen, dies mit populären Wörtern wie histing zu erklären, aber ich verstehe nicht, wie dies in diesem konkreten Beispiel möglich ist.

Auch wenn die zweite render Funktion der Variablen zugewiesen wird, dann funktioniert dieser Code wie erwartet. Dies kann auch nicht explane Hissen Definition verwendet wird, als erste Funktion nicht auf Variablen zugewiesen wurde:

function render() { 
    //returns execution result 
    return 1; 
} 

console.log(render()); //returns 1 

var render = function() { 
    return 2; 

}

ich völlig verstehen, dass dieser fehlerhafter Code ist, aber ich will, warum diese Werke verstehen auf diese Weise und wie spart man nicht Zeit mit der Identifizierung solcher Art von Problemen?

Answer 1

Wenn Sie eine Funktion in Javascript definieren, wird sie an den Anfang des umschließenden Bereichs gehisst, so dass es keine Rolle spielt, in welchem ​​Bereich Sie die Definition genau so tun, als ob sie alle am Anfang wären. Sie behalten jedoch ihre Reihenfolge der Definition bei. Wenn mehrere Funktionen mit demselben Namen vorhanden sind, wird nur die letzte im Gültigkeitsbereich definierte Funktion angezeigt.

Dies erklärt, warum Ihr Code 2 als zweite Funktion die erste ausblendet.

Bei der Zuweisung zu einer Variablen mit var, die den gleichen Namen wie eine Funktion hat, die die Funktion verbirgt, gelten nun die üblichen Regeln für die Variablenzuordnung.

Wenn stattdessen hatte man let verwendet (und hatte einen Browser, der let unterstützt) Sie als ein anderes Ergebnis gesehen hätte dann die console.log(render()) Linie eine Ausnahme für einen nicht definierten Variable werfen würde, weil die let gehisst wird (so versteckt die erste Funktion) aber die Initialisierung findet erst nach der Ausgabe statt.

function render() { 
    //returns execution result 
    return 1; 
} 

console.log(render()); //throws exception for undefined variable. 

let render = function() { 
    return 2; 
} 

N.B. Dies ist einer der Bereiche, in denen sich Wandler von ES2015 bis ES5 möglicherweise falsch verhalten, da es schwierig ist, effizienten ES5-Code zu erstellen, der nach undefinierten Variablen suchen kann.