箭头功能的优先级是否高于正常功能

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

这与箭头函数无关。相反，常规函数(和var声明(被挂起；无论您在哪里编写它们，它们都会移动到其范围的顶部。实际上，两个代码样本完全相同，它们看起来像这样：

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

与

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

在这两种情况下，都有一个挂起的var increment;声明，然后按编写顺序进行赋值，这意味着最后一个赋值获胜。

---

顺便说一句，这是喜欢let x = () => { }而不是"旧"风格函数声明的主要原因之一。let没有被提升，因此函数从您自然期望的时间点开始存在，而不是跳到您的范围的顶部。