Fonction JavaScript ordre: pourquoi est-il important?

tl;dr Si vous n'êtes pas à l'appel de rien jusqu'à ce que tout se charge, vous devriez être bien.

---

Edit: Pour un aperçu de ce qui couvre aussi certains ES6 déclarations (let, const): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet

Cette étrange comportement dépend

1. La façon de définir les fonctions et les
2. Lorsque vous les appelez.

Voici quelques exemples.

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

C'est parce que de quelque chose qui s'appelle de levage!

Il y a deux façons de définir les fonctions: Fonction déclaration et de la fonction expression. La différence est ennuyeux, et de la minute, alors laissez-moi vous dire un peu de mal chose: Si vous avez écrit comme function name() {}, c'est un déclaration, et quand vous l'écrivez comme var name = function() {} (ou une fonction anonyme attribué à un retour, des choses comme ça), c'est une fonction expression.

Tout d'abord, examinons la manière dont les variables sont traitées:

var foo = 42;

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

Maintenant, comment la fonction déclarations sont traitées:

var foo = 42;
function bar() {}

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

La var états "jette" le création de foo vers le très haut, mais ne pas attribuer de la valeur à l'instant. La déclaration de la fonction est la prochaine étape en ligne, et, finalement, d'une valeur est affectée à foo.

Et que dire de cela?

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

Seulement la déclaration de foo est déplacé vers le haut. La cession ne vient qu'après l'appel à bar est faite, où il était avant le levage s'est produite.

Et enfin, pour la concision:

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

Maintenant, qu'en fonction expressions?

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

Comme des variables, la première foo est déclaré au point le plus élevé de la portée, puis il est affecté d'une valeur.

Nous allons voir pourquoi le deuxième exemple renvoie une erreur.

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

Comme nous l'avons vu auparavant, seule la création de foo est hissé, la tâche vient où il est apparu dans les "originaux" (onu-hissés) du code. Lorsque bar est appelé, il est avant foo est affectée une valeur, donc foo === undefined. Maintenant, dans la fonction-corps de bar, c'est comme si vous êtes en train de faire undefined(), ce qui déclenche une erreur.

Il y a trop de gens poussent arbitraire des règles sur la façon JavaScript doit être écrit. La plupart des règles sont de proférer des âneries.

Fonction de levage est une fonction en JavaScript parce que c'est une bonne idée.

Lorsque vous avez une fonction interne qui est souvent l'utilité de fonctionnement intérieur, de l'ajouter au début de la fonction externe est acceptable style de l'écriture de code, mais elle a l'inconvénient que vous avez à lire à travers les détails pour en arriver à ce que l'extérieur de la fonction n'.

Vous devez vous en tenir à un principe tout au long de votre base de code, soit mis en privé, les fonctions de premier ou en dernier dans votre module ou de la fonction. JSHint est bon pour faire respecter la cohérence, mais vous devez ABSOLUMENT régler l' .jshintrc en fonction de vos besoins, de ne PAS ajuster votre code source à d'autres peuples loufoque concepts de codage.

Un style de codage que vous pouvez voir dans la nature que vous devriez éviter, car il vous donne aucun avantage et seulement possible de refactoring de la douleur:

function bigProcess() {
    var step1,step2;
    step1();
    step2();

    step1 = function() {...};
    step2 = function() {...};
}

C'est exactement ce que la fonction de levage est là pour éviter. Juste à apprendre la langue et de valoriser ses atouts.