提升优先级和可变变异

Question

当涉及到提升和变量突变时，我正在尝试解决一些问题。

1. 变量赋值优先于函数声明
2. 函数声明优先于变量声明

根据https://scotch.io/tutorials/understanding-hoisting-in-javascript，函数声明被提升到变量声明之上，而不是变量赋值之上。这非常令人困惑，因为我认为只有变量声明和函数声明会被提升。

var double = 22;

function double(num) {
 return (num*2);
}

console.log(typeof double); // Output: number

所以提升它应该看起来像

function double(num) {
  return (num*2);
}

var double;
double = 22;


console.log(typeof double); // Output: number

如果变量赋值优先于函数声明，为什么 double = 22 不在函数声明之上？另一个例子

var double;

function double(num) {
  return (num*2);
}

console.log(typeof double); // Output: function

通过将函数提升到变量声明上方，控制台应该记录 undefined 不是吗？使用变量变异，最后的赋值是程序应该执行的。

Answer 1

根据 MDN：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting#Only_declarations_are_hoisted

JavaScript 只提升声明，而不是初始化。

因此，让我们重写您的示例以便更好地理解：

1.

var double = 22

function double(num) {
  return (num*2)
}

console.log(typeof double)

这可以读作：

// hoisted
var double

function double(num) {
  return (num*2)
}

// initialise
double = 22

console.log(typeof double)

2 & 3 可以按照您编写它们的顺序完全阅读。在 2) 初始化发生在最后，所以它输出Number。 3）中根本没有初始化，所以函数最后声明，所以输出Function。

所以你对第三个例子的困惑似乎是理解声明和初始化之间的区别。

---

编辑：订购肯定有一些混淆（因此写this can be read like..）。虽然 javascript 在技术上首先提升了函数，但您仍然应该阅读我编写的代码，因为函数优先于变量声明。换句话说，虽然从技术上讲，提升是：

function double(num) {
  return (num*2);
}    

var double;    

console.log(typeof double); // Output: function

函数仍然优先，所以最好反过来读。

Answer 2

（来自cmets）

如果变量赋值优先于函数声明，为什么double = 22不在函数声明之上？

变量名声明被提升，但赋值 (=) 从未提升。

那么“变量赋值优先于函数声明”是什么意思呢？

这完全没有意义，真的。赋值和声明是两个完全不相关的东西，它们不会“优先”于彼此。我想这应该意味着您始终可以分配一个可变变量，并且之后它将保持分配的值，而不管该变量在何处/如何声明（使用 var 或函数）。

在我的上一个示例中，即使函数被提升到变量声明之上，输出仍然是函数而不是未定义？

因为“优先”不是指顺序，如“被提升在另一个之上”。对于我们的目的，声明实际上没有任何顺序，所有变量都是一次创建的 (that's what "hoisting" actually means)。

优先级是指初始化变量的值，undefined 用于vars，函数对象用于functions。该规则意味着当存在与var 声明同名的function 声明时，则使用函数初始化变量。

Answer 3

这应该澄清是什么意思：

var myVar = 1;

outerFunc1();
outerFunc2();


function outerFunc1()
{

  innerFunc();    // works due to hoisted declaration

  function innerFunc()
  {
    console.log(myVar);
  }

  var innerFunc;  // function declarations take precedence

  innerFunc();    // works even if var innerFunc is declared
}

function outerFunc2()
{

  innerFunc();    // outputs undefined since myVar is redeclared locally (hoisted)

  function innerFunc()
  {
    console.log(myVar);
  }

  var myVar = 2;  // local declaration (AND initialisation)


  var innerFunc;  // function declaration take precedence

  innerFunc();    // outputs 2 even if var innerFunc is declared

  innerFunc = 1;  // this overwrites the function
  innerFunc();    // gives an error 'not a function'.
}