JavaScript 函数顺序:为什么重要? [英] JavaScript function order: why does it matter?
问题描述
JSHint 当我的 JavaScript 调用一个定义在页面下方而不是调用它的函数时会抱怨.但是，我的页面是用于游戏的，在下载整个内容之前不会调用任何函数.那么为什么订单函数出现在我的代码中很重要?
JSHint complains when my JavaScript calls a function that is defined further down the page than the call to it. However, my page is for a game, and no functions are called until the whole thing has downloaded. So why does the order functions appear in my code matter?
http://www.adequatelygood.com/2010/2/JavaScript 作用域和提升
我在里面呻吟.看起来我需要再花一天时间重新排序六千行代码.使用 javascript 的学习曲线一点也不陡峭，但非常漫长.
I am groaning inside. Looks like I need to spend ANOTHER day re-ordering six thousand lines of code. The learning curve with javascript is not steep at all, but it is very loooooong.
推荐答案
tl;dr 如果您在一切加载之前都不调用任何东西，那应该没问题.
tl;dr If you're not calling anything until everything loads, you should be fine.
有关还涵盖一些 ES6 声明(let、const)的概述:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet
For an overview which also covers some ES6 declarations (let, const): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet
这种奇怪的行为取决于
- 你如何定义函数和
- 当你打电话给他们时.
这里有一些例子.
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() {}(或分配给 return 的匿名函数，诸如此类)，它是一个函数 表达式.
There are two ways to define functions: Function declaration and function expression. The difference is annoying and minute, so let's just say this slightly wrong thing: If you're writing it like function name() {}, it's a declaration, and when you write it like var name = function() {} (or an anonymous function assigned to a return, things like that), it's a 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 赋值.
The var statements "throws" the creation of foo to the very top, but doesn't assign the value to it yet. The function declaration comes next in line, and finally a value is assigned to foo.
bar();
var foo = 42;
function bar() {}
//=>
var foo;
function bar() {}
bar();
foo = 42;
只有 foo 的 declaration 被移到顶部.分配仅在调用 bar 之后出现，在所有提升发生之前.
Only the declaration of foo is moved to the top. The assignment comes only after the call to bar is made, where it was before all the hoisting occurred.
bar();
function bar() {}
//turns to
function bar() {}
bar();
现在，函数表达式怎么样?
var foo = function() {}
foo();
//=>
var foo;
foo = function() {}
foo();
就像普通变量一样，首先foo在作用域的最高点声明，然后被赋值.
Just like regular variables, first foo is declared at the highest point of the scope, then it is assigned a value.
bar();
function bar() {
foo();
}
var foo = function() {}
//=>
var foo;
function bar() {
foo();
}
bar();
foo = function() {}
正如我们之前看到的，只有 foo 的创建被提升，赋值出现在它出现在原始"(未提升)代码中的位置.当bar被调用时，是在foo被赋值之前，所以foo === undefined.现在在 bar 的函数体中，就好像您在执行 undefined() 一样，这会引发错误.
As we've seen before, only the creating of foo is hoisted, the assignment comes where it appeared in the "original" (un-hoisted) code. When bar is called, it is before foo is assigned a value, so foo === undefined. Now in the function-body of bar, it's as if you're doing undefined(), which throws an error.
这篇关于JavaScript 函数顺序:为什么重要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
