JavaScript函数顺序：为什么这很重要？ [英] JavaScript function order: why does it matter?

问题描述

原始问题：

JSHint 抱怨我的JavaScript调用函数这是在页面的下方定义的，而不是对它的调用。但是，我的页面是用于游戏的，在下载完整个东西之前不会调用任何函数。那么为什么订单函数会出现在我的代码问题中？

编辑：我想我可能找到了答案。

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

我在内心呻吟。看起来我需要花一天时间重新订购六千行代码。使用javascript的学习曲线根本不陡峭，但它非常漂亮。

解决方案

强>如果你没有调用任何东西，直到一切都加载，你应该没问题。

---

编辑：对于也包含一些ES6声明（ let ， const ）： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Scope_Cheatsheet

这种奇怪的行为取决于

1. 您如何定义函数和$ / $>
   
2. 当你给他们打电话时。

以下是一些例子。

 巴（）; //这不会抛出一个错误
函数bar（）{} 
 
 foo（）; //这会抛出一个错误
 var foo = function（）{} 
 
 ---- 
 
 bar（）; 
函数bar（）{
 foo（）; //这会抛出一个错误
 
 var foo = function（）{} 
 
 ---- 
 
 bar（）; 
函数bar（）{
 foo（）; //这个_won't_会抛出一个错误
} 
函数foo（）{} 
 
 --- 
 
函数bar（）{
 foo（）; //没有错误
} 
 var foo = function（）{} 
 bar（）; 
  

这是因为 hoisting ！

！

定义函数有两种方法：Function 声明和函数表达式。不同之处在于烦人和分钟，所以我们只是略微说错了：如果你像函数名（）{} 那样写它，它是一个声明，当你像 var name = function（）{} （或者指定给返回值的匿名函数那样的东西）写它时，它是一个函数表达式。

首先，我们来看看如何处理变量：

  var foo = 42; 
 
 //解释器把它变成这样：
 var foo; 
 foo = 42; 
  

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

  var foo = 42; 
函数bar（）{} 
 
 //变成
 var foo; //疯狂！它现在位于
顶部的功能栏（）{} 
 foo = 42; 
  

var 语句抛出 em>创建的 foo 到最顶端，但不会将值分配给它。函数声明接下来是行，最后一个值被分配给 foo 。

这又如何呢？

  bar（）; 
 var foo = 42; 
函数bar（）{} 
 // => 
 var foo; 
函数bar（）{} 
 bar（）; 
 foo = 42; 
  

只有 foo 的声明 c $ c>移到顶部。只有在对 bar 进行调用之后，才会进行分配。

最后，为了简洁起见：

  bar（）; 
函数bar（）{} 
 //转向
函数bar（）{} 
 bar（）; 
  

现在，函数表达式怎么样？

  var foo = function（）{} 
 foo（）; 
 // => 
 var foo; 
 foo = function（）{} 
 foo（）; 
  

就像常规变量一样，首先 foo 是在范围的最高点声明，然后分配一个值。

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

  bar（）; 
函数bar（）{
 foo（）; 
} 
 var foo = function（）{} 
 // => 
 var foo; 
函数bar（）{
 foo（）; 
} 
 bar（）; 
 foo = function（）{} 
  

正如我们以前所见，的 foo 被挂起，分配就出现在原始（未挂起）代码中。当 bar 被调用时，它在 foo 被分配一个值之前，所以 foo == =未定义。现在在 bar 的函数体中，就好像你在做 undefined（），这会抛出一个错误。

Original Question:

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?

EDIT: I think I may have found the answer.

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

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 If you're not calling anything until everything loads, you should be fine.

---

Edit: For an overview which also covers some ES6 declarations (let, const): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet

This weird behavior depends on

1. How you define the functions and
2. When you call them.

Here's some examples.

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();

This is because of something called hoisting!

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.

First, let's look at how variables are handled:

var foo = 42;

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

Now, how function declarations are handled:

var foo = 42;
function bar() {}

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

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.

And what about this?

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

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.

And finally, for conciseness:

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

Now, what about function expressions?

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

Just like regular variables, first foo is declared at the highest point of the scope, then it is assigned a value.

Let's see why the second example throws an error.

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

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屋！