Haben Pfeilfunktionen eine höhere Priorität als normale Funktionen?

8

Beide folgenden Schnipsel drucken "Pfeil". Ich würde gerne wissen warum. Haben Pfeilfunktionen eine höhere Priorität als die normalen Funktionen, wenn beide denselben Namen haben?

function increment(){
    alert("normal")
}


var increment = () => {
    alert("arrow")
}

increment(); //prints arrow
var increment = () => {
    alert("arrow")
}


function increment(){
    alert("normal")
}


increment(); //prints arrow
javascript Neon
quelle
Versuchen Sie dasselbe, aber verwenden Sie stattdessen let oder const. Mit var definierte Variablen sind unabhängig von der Reihenfolge im gesamten Bereich verfügbar. Deshalb kann sie meiner Meinung nach Ihre Funktion überschreiben.
Aykhan

Antworten:

9

Dies hat nichts mit Pfeilfunktionen zu tun. Vielmehr werden reguläre Funktionen (und varDeklarationen) gehisst ; Unabhängig davon, wo Sie sie schreiben, werden sie an die Spitze ihres Bereichs verschoben. Tatsächlich sind beide Codebeispiele völlig identisch und sehen folgendermaßen aus:

var increment; // hoisted

function increment() { // hoisted
    alert("normal")
}

increment = () => { // the assignment itself is unaffected
    alert("arrow")
}

increment(); //prints arrow

Der Zuordnungsteil von var increment = ...erfolgt in beiden Fällen nach der angehobenen Funktion und varDeklaration. Unabhängig davon, wo Sie die function increment() { }Deklaration tatsächlich geschrieben haben , wird sie über die Zeile angehoben, die die Zuweisung zur incrementVariablen ausführt .

Aus diesem Grund funktioniert der folgende Code immer noch, obwohl die Funktion anscheinend nach ihrer Verwendung definiert wurde:

increment(); //prints normal

function increment(){
    console.log("normal")
}

Wenn Sie Gleiches mit Gleichem vergleichen möchten, müssen Sie var increment = () => { ... }mit var increment = function () { ... }zwei Aufgaben vergleichen. Die Ergebnisse sehen folgendermaßen aus:

var increment = () => { console.log('arrow'); }
var increment = function () { console.log('normal'); }

increment(); # normal

vs.

var increment = function () { console.log('normal'); }
var increment = () => { console.log('arrow'); }

increment(); # arrow

In beiden Fällen gibt es eine einzige hochgezogene var increment;Deklaration, und dann erfolgen die Zuweisungen in der Reihenfolge, in der sie geschrieben wurden, was bedeutet, dass die letzte Zuweisung gewinnt.

Abgesehen davon ist dies einer der Hauptgründe, let x = () => { }um "alten" Funktionsdeklarationen vorzuziehen . letwird nicht gehisst, daher existiert die Funktion ab dem Zeitpunkt, den Sie natürlich erwarten würden, anstatt an die Spitze Ihres Bereichs zu springen.

meagar
quelle