Kolejność funkcji JavaScript: dlaczego ma to znaczenie?

Tl; dr Jeśli nic nie dzwonisz, dopóki wszystko się nie załaduje, powinno być dobrze.

Edit: dla przeglądu, który obejmuje również niektóre deklaracje ES6(let, const): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet

To dziwne zachowanie zależy od

1. jak definiujesz funkcje i
Kiedy do nich zadzwonisz.

Oto kilka przykłady.

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

To z powodu czegoś, co nazywa się podnoszeniem!

Istnieją dwa sposoby definiowania funkcji: Function declaration oraz function expression . Różnica jest irytująca i minuta, więc powiedzmy to trochę źle: jeśli piszesz to jak function name() {}, to jest to deklaracja , a kiedy piszesz to jak var name = function() {} (lub anonimowa funkcja przypisana do zwrotu, takie rzeczy), to jest to funkcja wyrażenie.

Najpierw przyjrzyjmy się, jak zmienne są obsługiwane:

var foo = 42;

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

Teraz, jak funkcja deklaracje są obsługiwane:

var foo = 42;
function bar() {}

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

The var statements "rzuca" utworzenie z foo na sam szczyt, ale nie przypisuje mu jeszcze wartości. Deklaracja funkcji jest następująca w linii, a na koniec przypisana jest wartość foo.

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

Zostaje przeniesiona tylko deklaracja z foo na szczyt. Przypisanie następuje dopiero po wywołaniu bar, gdzie było przed wystąpieniem wszystkich podnośników.

I wreszcie, dla zwięzłości:

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

A co z funkcjami wyrażeniami ?

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

Podobnie jak zwykłe zmienne, najpierw foo jest zadeklarowane w najwyższym punkcie zakresu, a następnie jest przypisana wartość.

Zobaczmy, dlaczego drugi przykład rzuca błąd.

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

Jak widzieliśmy wcześniej, tylko tworzenie foo jest podnoszone, przypisanie przychodzi tam, gdzie pojawiło się w kodzie" oryginalnym " (un-hoisted). Gdy wywołane jest bar, to przed foo zostanie przypisana wartość, więc foo === undefined. Teraz w ciele funkcji bar, to tak, jakbyś robił undefined(), co powoduje błąd.