As funções de seta têm uma prioridade mais alta que as funções normais?

8

Ambos os seguintes trechos imprimem "seta". Eu gostaria de saber o porquê. As funções de seta têm um tipo de prioridade mais alta que as funções normais se ambas tiverem o mesmo nome?

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


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

increment(); //prints arrow

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


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


increment(); //prints arrow
javascript Néon
fonte
Tente a mesma coisa, mas usando let ou const. variáveis ​​definidas usando var estão disponíveis em todo o escopo, independentemente da ordem, e é por isso que acho que ele pode substituir sua função.
Aykhan

Respostas:

9

Isso não tem nada a ver com funções de seta. Em vez disso, funções regulares (e vardeclarações) são içadas ; independentemente de onde você os escreve, eles são movidos para o topo de seu escopo. Efetivamente, os dois exemplos de código são completamente idênticos e têm a seguinte aparência:

var increment; // hoisted

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

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

increment(); //prints arrow

A parte da atribuição var increment = ...ocorre após a função e a vardeclaração do içamento, nos dois casos. Independentemente de onde você realmente escreveu a function increment() { }declaração, ela é içada acima da linha que executa a atribuição à incrementvariável.

É por isso que o código a seguir ainda funciona, apesar da função estar aparentemente definida após ser usada:

increment(); //prints normal

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

Se você deseja comparar gostos com gostos, precisa comparar var increment = () => { ... }com var increment = function () { ... }, ou seja, duas atribuições. Os resultados são assim:

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

Nos dois casos, há uma única var increment;declaração de elevação e as atribuições ocorrem na ordem em que foram escritas, o que significa que a última atribuição vence.

Como um aparte, esse é um dos principais motivos para preferir let x = () => { }declarações de função no estilo "antigo". letnão é içada, portanto, a função existe a partir do momento em que você naturalmente esperaria, em vez de saltar para o topo do seu escopo.

magro
fonte