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();

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

根据第三点的解释，下面的代码片段应该return 8、函数bar()。但它说 undefined, function bar().

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

Answer 1

基本上 - 可以说我们有，没有特定的顺序

function hello(){};
var sup;
var yo = 4;

随着变量提升，顺序将变为

    var yo = 4;
    function hello(){};
    var sup;

因为 var 赋值优先于函数，而函数又优先于函数声明。

Answer 2

从您 link 到的文章：

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

函数声明做两件事：

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

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

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

Answer 3

你的最后一个例子被解释为

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

console.log(foo); // here 'foo' is undefined
console.log(bar); // bar is of type function
foo = 8;

JavaScript变量提升说明

JavaScript variable hoisting explanation

javascript

hoisting