Question

以下两个摘录均显示“箭头”。我想知道为什么。如果箭头功能具有相同的名称，它们的优先级是否比普通功能高？

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


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

increment(); //prints arrow

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


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


increment(); //prints arrow

Answer 1

这与箭头功能无关。相反， regular 函数（和var声明）是hoisted；无论您在何处编写它们，它们都将移至其作用域的顶部。实际上，这两个代码示例完全相同，看起来像这样：

var increment; // hoisted

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

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

increment(); //prints arrow

在两种情况下，var increment = ...的赋值部分都在提升的函数和var声明之后出现。不管您实际在何处编写function increment() { }声明，它都将悬挂在执行对increment变量的赋值的行上方。

这就是为什么尽管使用了显然定义了以下功能，但以下代码仍然有效的原因：

increment(); //prints normal

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

如果您要比较“喜欢”，则需要将var increment = () => { ... }与var increment = function () { ... }进行比较，即两个分配。结果如下：

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

在这两种情况下，都只有一个悬挂的var increment;声明，然后分配按其写入的顺序进行，这意味着最后一个分配将获胜。

顺便说一句，这是首选let x = () => { }而不是“旧的”样式函数声明的主要原因之一。 let没有被吊起，因此该功能从您自然希望的时间点开始就存在，而不是跳到示波器的顶部。

箭头功能是否比普通功能具有更高的优先级？

1 个答案: