tl; drすべてが読み込まれるまで何も呼び出さない場合は、問題ありません。
編集:いくつかのES6宣言(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();
これは、巻き上げと呼ばれるものによるものです。
関数を定義するには、関数宣言と関数式の 2つの方法があります。違いは迷惑と分なので、ちょうどこの少し間違ったことを言ってみましょう:あなたのようにそれを書いている場合function name() {}
、それはだ宣言、そしてあなたのようにそれを書くときvar name = 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
されたと宣言、それは値が割り当てられ、範囲の最高点。
2番目の例がエラーをスローする理由を見てみましょう。
bar();
function bar() {
foo();
}
var foo = function() {}
//=>
var foo;
function bar() {
foo();
}
bar();
foo = function() {}
これまでに見たように、の作成のみfoo
が巻き上げられ、割り当ては「元の」(巻き上げられていない)コードに現れたところから始まります。ときにbar
呼ばれて、それが前にされたfoo
値が割り当てられ、そうされますfoo === undefined
。これでの関数本体でbar
、を実行しているかのようになりundefined()
、エラーがスローされます。