¿Las funciones de flecha tienen mayor prioridad que las funciones normales?

8

Los dos fragmentos siguientes imprimen "flecha". Me gustaría saber por qué. ¿Las funciones de flecha tienen una especie de prioridad más alta que las funciones normales si ambas tienen el mismo nombre?

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


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

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


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


increment(); //prints arrow
javascript Neón
fuente
Pruebe lo mismo pero usando let o const en su lugar. Las variables definidas usando var están disponibles en todo el ámbito, independientemente del orden, por eso creo que puede anular su función.
Aykhan, el

Respuestas:

9

Esto no tiene nada que ver con las funciones de flecha. Por el contrario, las funciones regulares (y vardeclaraciones) son izadas ; independientemente de dónde los escriba, se moverán a la parte superior de su alcance. Efectivamente, ambos ejemplos de código son completamente idénticos, y se ven así:

var increment; // hoisted

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

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

increment(); //prints arrow

La parte de asignación de var increment = ...ocurre después de la función izada y la vardeclaración, en ambos casos. Independientemente de dónde escribió realmente la function increment() { }declaración, se eleva por encima de la línea que realiza la asignación a la incrementvariable.

Es por eso que el siguiente código aún funciona, a pesar de que la función aparentemente se define después de ser utilizada:

increment(); //prints normal

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

Si desea comparar like con like, debe comparar var increment = () => { ... }con var increment = function () { ... }, es decir, dos tareas. Los resultados se ven así:

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

En ambos casos, hay una sola var increment;declaración de izado , y luego las asignaciones ocurren en el orden en que están escritas, lo que significa que gana la última asignación.

Por otro lado, esta es una de las principales razones para preferir let x = () => { }a las declaraciones de funciones de estilo "antiguo". letno está izado, por lo que la función existe desde el momento en que lo esperarías naturalmente, en lugar de saltar a la parte superior de tu alcance.

meagar
fuente