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
- Comment vous définir les fonctions et les
- 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 des fonctions: la Fonction de la déclaration et de la fonction de l'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 une 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 d'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;
L' var
états "jette" la création d' 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 à l' foo
.
Et que dire de cela?
bar();
var foo = 42;
function bar() {}
//=>
var foo;
function bar() {}
bar();
foo = 42;
Seule la déclaration d' foo
est déplacé vers le haut. La cession ne vient qu'après l'appel à l' 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 d' 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.
Voyons 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 d' foo
est hissé, la tâche vient où il est apparu dans les "originaux" (onu-hissés) du code. Lors de l' bar
est appelé, il est avant foo
est affectée une valeur, alors 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.
tl;dr Si vous n'êtes pas à l'appel de rien jusqu'à ce que tout se charge, vous devriez être bien.