javascript - 为什么以及何时会立即忽略变量声明，并在后续查询中覆盖函数声明？

Question

在关注 Pluralsight 上 Kyle Simpson 的 Advanced JavaScript 时，我遇到了这段代码，它应该证明函数声明在变量声明之前得到(预)编译:

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

(请注意，上面的代码要么输入为带有空格而不是换行符的单行，要么使用 SHIFT+ENTER 防止在输入整个代码之前立即执行。)输入整个代码的立即结果
上面在 Node 或 (Chrome) 控制台中的代码(并按 Enter 键)是:

  foo                                                                                                   
< undefined  

套用凯尔的解释，第一个 function foo声明被第二个覆盖，所以 foo将输出输出到控制台，并且由于 foo已被声明为函数， var foo声明被(预)编译器忽略。

直接结果支持被忽略的理论，然而，随后对 foo 的调查和 foo()展示了一个不同的故事:

> foo                                                                                                   
2                                                                                                       
> foo()                                                                                                 
Uncaught TypeError: foo is not a function                                                               
> 

有人可以解释为什么以及何时忽略 var foo = 2; 的声明当立即执行产生:

  foo
< undefined  

我的理解是 JavaScript 引擎(预)编译解析步骤应该注意两个函数的声明，然后是变量的声明，按顺序，然后在执行步骤中 foo();执行尝试应该像随后一样失败，并显示: Uncaught TypeError: foo is not a function - 但显然不是这样，因为 foo将输出作为直接结果的一部分。

Answer 1

javascript 中的变量和函数是 吊装

如书面 here :

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Inevitably, this means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local

这意味着在你写这个之后:

foo();
var foo = 2;

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

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

它实际上看起来像这样(这是为什么事情会以这种方式发生的非常合乎逻辑的:

var foo;

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

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

foo(); // this happens first
foo = 2; // this happens after

console.log(foo);