为什么函数声明在求值过程中总是移到顶部？

Question

这实际上不是我遇到的具体问题，而是我想自学的问题：

据我所知，在 JavaScript 中，以下代码

if (true) {
    function greet(){ alert("Hello!"); }
} else {
    function greet(){ alert("Hi!"); }
} 
greet();

输出 Hi! 因为代码实际上被评估为某种东西像这样：

greet = function(){ alert("Hello!"); }
greet = function(){ alert("Hi!"); }

if(true){
    // possibly a no-op assignment, such as greet = greet?
}else{
    // same as the other branch?
} 
greet();

从语言设计的角度来看，为什么 JavaScript 会有这样的行为？

Answer 1

命名函数是在代码开始之前创建的，因此您不必将函数的声明放在使用它的代码之前：

x(); // this is possible because the function already exists

function x() {}

函数声明在哪里并不重要，即使它位于流程控制结构内，它仍然是在代码开始之前创建的。因此，示例中的 if 语句内根本没有可执行代码，甚至没有无操作赋值。

如果要动态分配函数声明，则必须使用变量：

var greet;
if (true) {
  greet = function(){ alert("Hello!"); }
} else {
  greet = function(){ alert("Hi!"); }
} 
greet();

但不必使用匿名函数，您可以将两个命名函数之一分配给变量。

Answer 2

您可能已经发现了该语言的一个怪癖，如果您进一步观察，您还会发现不同的实现。

ECMAScript 处理有两个阶段 - 在第一个阶段，处理所有声明以在其声明范围内创建命名属性。在第二步中，代码被执行。因此，声明的函数和变量从执行开始就在其声明范围内可用，无论它们在代码中的何处声明。

而那些通过赋值创建或赋值的，只有在执行赋值代码时才会有值。

所以：

// Call x
x();

// Declare x
function x(){}

工作没有错误。这通俗地称为“提升”，意思是声明被“提升”到作用域的顶部。

但是，解释一下您的示例：

if (true) {
    function x(){
        alert('true x');
    }
} else {
    function x(){
        alert('false x');
    }
}

// In most browsers
x(); // false x

// But in Firefox
x(); // true x

对于大多数浏览器，第二个声明会覆盖第一个声明。这是因为 ECMAScript 没有块作用域，只有函数和全局作用域。

但是，在这种情况下，允许对该语言进行扩展。 Firefox 将以上内容视为命名函数表达式，因此显示 true x。更重要的是，因为其他浏览器将表达式视为声明，所以可以从代码块上方调用 x，但在 Firefox 中则不能，您会收到错误。

最重要的是，如果您想有条件地将函数分配给命名参数或变量，请明确执行以下操作：

var x;
if (true) {
    x = function (){
          alert('true x');
        };
} else {
    x = function (){
            alert('false x');
        };
}

以便获得一致的行为。您还必须记住，在执行代码之前，x 不会是一个函数，它不会被“提升”，因为它不是一个声明。

Answer 3

首先，它并不总是以这种方式表现。对于函数表达式，函数对象仅在内部范围内可用。

其次，当你定义一个函数时，你很可能想在当前作用域中使用它。所以它在当前范围内变得可用是很自然的。考虑封闭范围（取决于函数定义位置）是全局对象或封闭函数体，而不是 if 块。

现在，我可以将您的问题简化为以下问题：

• 为什么使用函数名称作为变量名称？

  A：否则开发人员必须始终将函数分配给变量（我更喜欢）。