JavaScript 函数顺序 : why does it matter?

Question

原始问题:

JSHint当我的 JavaScript 调用一个定义在页面下方的函数而不是对它的调用时，就会提示。但是，我的页面是用于游戏的，在整个下载完成之前不会调用任何函数。那么为什么出现在我的代码中的订单函数很重要？

编辑:我想我可能已经找到了答案。

http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

我在里面呻吟。看来我需要再花一天时间重新排序六千行代码。 javascript 的学习曲线一点也不陡峭，但非常长。

Answer 1

tl;dr 如果您在加载所有内容之前不调用任何内容，那么您应该没问题。

---

编辑:概述也涵盖一些 ES6 声明(let、const):https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet

这种奇怪的行为取决于

1. 你如何定义函数和
2. 当你调用他们时。

这里有一些例子。

bar(); //This won't throw an error
function bar() {}

foo(); //This will throw an error
var foo = function() {}

bar();
function bar() {
    foo(); //This will throw an error
}
var foo = function() {}

bar();
function bar() {
    foo(); //This _won't_ throw an error
}
function foo() {}

function bar() {
    foo(); //no error
}
var foo = function() {}
bar();

这是因为一种叫做提升的东西!

定义函数有两种方式:函数声明和函数表达式。区别很烦人而且很细微，所以我们只说这个有点错误的事情:如果你像 function name() {} 那样写它，它是一个声明，当你把它写成 var name = function() {}(或分配给返回值的匿名函数，诸如此类)，它是一个函数 expression。

首先，让我们看看如何处理变量:

var foo = 42;

//the interpreter turns it into this:
var foo;
foo = 42;

现在，如何处理函数声明:

var foo = 42;
function bar() {}

//turns into
var foo; //Insanity! It's now at the top
function bar() {}
foo = 42;

var 语句将 foo 的创建“扔”到最顶层，但尚未为其分配值。接下来是函数声明，最后一个值被分配给 foo。

那这个呢？

bar();
var foo = 42;
function bar() {}
//=>
var foo;
function bar() {}
bar();
foo = 42;

只有foo 的声明 被移动到顶部。分配仅在调用 bar 之后进行，在所有提升发生之前。

最后，为了简洁起见:

bar();
function bar() {}
//turns to
function bar() {}
bar();

现在，函数表达式呢？

var foo = function() {}
foo();
//=>
var foo;
foo = function() {}
foo();

就像常规变量一样，首先 foo 在作用域的最高点被声明，然后被赋值。

让我们看看为什么第二个示例会抛出错误。

bar();
function bar() {
    foo();
}
var foo = function() {}
//=>
var foo;
function bar() {
    foo();
}
bar();
foo = function() {}

正如我们之前所见，只有 foo 的创建被提升，赋值出现在它出现在“原始”(未提升)代码中的位置。当 bar 被调用时，它是在 foo 被赋值之前，所以 foo === undefined。现在在 bar 的函数体中，就好像您正在执行 undefined()，这会引发错误。