矢印関数は通常の関数よりも優先されますか?


8

次のスニペットはどちらも「矢印」を出力します。その理由を知りたいのですが。アロー関数は、同じ名前の場合、通常の関数よりも優先度が高いのですか?

function increment(){
    alert("normal")
}


var increment = () => {
    alert("arrow")
}

increment(); //prints arrow
var increment = () => {
    alert("arrow")
}


function increment(){
    alert("normal")
}


increment(); //prints arrow

同じことを試しますが、代わりにletまたはconstを使用してください。varを使用して定義された変数は、順序に関係なくスコープ全体で使用できます。そのため、関数をオーバーライドできると思います。
アイカン、

回答:


9

これは、矢印関数とは関係ありません。むしろ、通常の関数(および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は巻き上げられないので、関数は、スコープの先頭にジャンプするのではなく、自然に期待する時点から存在します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.