これは、矢印関数とは関係ありません。むしろ、通常の関数(およびvar宣言)は巻き上げられます。どこに書いても、スコープの先頭に移動します。事実上、両方のコードサンプルは完全に同一であり、次のようになります。
var increment; // hoisted
function increment() { // hoisted
alert("normal")
}
increment = () => { // the assignment itself is unaffected
alert("arrow")
}
increment(); //prints arrow
の割り当て部分は、どちらの場合も、巻き上げられた関数と宣言の後にvar increment = ...発生します。実際に宣言を書いた場所に関係なく、変数への代入を実行する行の上に表示されます。varfunction increment() { }increment
これが、使用後に関数が明らかに定義されているにもかかわらず、次のコードが引き続き機能する理由です。
increment(); //prints normal
function increment(){
console.log("normal")
}
あなたのようなと同じように比較したい場合は、比較する必要があるvar increment = () => { ... }とvar increment = function () { ... }され、2つの割り当て、。結果は次のようになります。
var increment = () => { console.log('arrow'); }
var increment = function () { console.log('normal'); }
increment(); # normal
対
var increment = function () { console.log('normal'); }
var increment = () => { console.log('arrow'); }
increment(); # arrow
どちらの場合も、ホイストされたvar increment;宣言が1つあり、割り当ては記述された順序で発生します。つまり、最後の割り当てが優先されます。
余談ですが、これはlet x = () => { }「古い」スタイルの関数宣言よりも優先する主な理由の1つです。letは巻き上げられないので、関数は、スコープの先頭にジャンプするのではなく、自然に期待する時点から存在します。