一尘不染

JavaScript函数顺序:为什么重要?

javascript

原始问题:

当我的JavaScript调用的功能在页面下方而不是在调用页面的下方定义时,JSHint会抱怨。但是,我的页面是用于游戏的,在下载全部内容之前,不会调用任何函数。那么为什么订单功能出现在我的代码中很重要?
我在里面吟。看来我需要花另一天的时间才能重新排序六千行代码。使用javascript的学习曲线一点也不陡峭,但是非常糟糕。


阅读 250

收藏
2020-05-01

共1个答案

一尘不染

tl; dr 如果在加载完成之前不调用任何东西,则应该没问题。


编辑:对于其中也包括一些ES6声明(概述letconst):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(){},那是一个 声明 ,而当您像这样编写它varname=function(){}(或分配给返回的匿名函数,诸如此类)时,它就是函数
表达式

首先,让我们看一下如何处理变量:

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(),这会引发错误。

2020-05-01