JavaScript 变量提升解释

Question

我看到了以下关于 javascript 中的变量提升的文章。文章总结了以下三点。

1. All declarations, both functions and variables, are hoisted to the top of the containing scope, before any part of your code is executed.
2. Functions are hoisted first, and then variables.
3. Function declarations have priority over variable declarations, but not over variable assignments.

Site Point

var showState = function() {
  console.log("Idle");
};

function showState() {
  console.log("Ready");
} 

showState(); 

我理解代码被 javascript 引擎解释为

function showState() { // moved to the top (function declaration)
    console.log("Ready");
}

var showState; // moved to the top (variable declaration)
showState = function() { // left in place (variable assignment)
    console.log("Idle");
};

showState();

但是，我无法理解摘要中第三点的含义。谁能解释一下第三点？第三点是什么意思？

根据第三点的解释，下面的代码片段应该返回8，function bar()。但它说未定义，函数 bar()。

console.log(foo);
console.log(bar);
var foo = 8;
function bar() {
    console.log("bar");
}

Answer 1

从您链接到的文章:

In the code above we saw that the function declaration takes precedence over the variable declaration. And in the next example we’ll see that when we have function declaration versus variable assignment, the last takes priority.

var showState = function() {
  console.log("Idle");
};

function showState() {
  console.log("Ready");
} 

showState();            // output: Idle

函数声明做两件事:

1. 它声明了一个与函数同名的变量
2. 它将函数分配给该变量

这两个都被提升了，而不仅仅是变量声明。 (这与具有关联赋值的 var 语句不同，后者仅提升声明)。

这意味着尽管 = function() { 代码在前面，later 函数声明仍然首先运行，所以 = function() { 可以覆盖它。