ES6はすぐにアロー関数を呼び出しました

なぜこれはNode.jsコンソール（4.1.1と5.3.0でテスト済み）では機能するが、ブラウザー（Chromeでテスト済み）では機能しないのですか？このコードブロックは、ログを記録する無名関数を作成して呼び出す必要がありますOk。

() => {
  console.log('Ok');
}()

また、上記しながら、作品のノードで、これは動作しません。

n => {
  console.log('Ok');
}()

これも：

(n) => {
  console.log('Ok');
}()

奇妙なことに、パラメータが追加されると、実際SyntaxErrorにはすぐに呼び出される部分にaがスローされます。

名前を必要とせず、有効なJavaScriptにする関数定義ではなく、関数式にする必要があります。

(() => {
  console.log('Ok');
})()

IIFEに相当

(function(){
   console.log('Ok')
})();

そして、これがNode.jsでは機能するがChromeでは機能しない理由として考えられるのは、パーサーがこれを自己実行機能として解釈するためです。

function() { console.log('hello'); }();

で正常に動作しますNode.js。これは、関数式とクロームとFirefoxとブラウザの解釈の最もそれこの方法です。手動で呼び出す必要があります。

JavaScriptでは、括弧にステートメントを含めることができないため、関数式を期待するようにパーサーに指示する最も広く受け入れられている方法は、括弧で囲むことです。この時点で、パーサーはfunctionキーワードを検出すると、それを関数宣言ではなく関数式として解析することを認識します。

パラメータ化されたバージョンについては、これは動作します。

((n) => {
  console.log('Ok');
})()

これらはいずれも括弧なしでは機能しません。

どうして？

仕様によると：

1. ArrowFunctionは、AssignmentExpressionの下にリストされています
2. CallExpressionのLHSは、MemberExpression、SuperCallまたはCallExpressionである必要があります

だから、ArrowFunctionはのLHSにすることはできませんCallExpression。

これ=>が解釈される方法で効果的に意味することは、代入演算子などと同じ種類のレベルで機能すること=です+=。

意味

• x => {foo}() しないとなって(x => {foo})()
• 通訳者はそれを次のように解釈しようとします x => ({foo}())
• したがって、それはまだSyntaxErrorです
• したがって、インタプリタ(はが間違っていたと判断し、SyntaxErrorをスローします

ここでもバベルのバグがありました。

このような問題が発生する理由は、コンソール自体が現在対象としているコンテキストのグローバルスコープをエミュレートしようとするためです。また、コンソールに書き込んだステートメントや式からの戻り値をキャプチャして、結果が表示されるようにします。例えば：

> 3 + 2
< 5

ここでは、式のように実行されますが、ステートメントのように記述しました。通常のスクリプトでは値は破棄されますが、ここではコードを内部でマングルする必要があります（ステートメント全体を関数コンテキストとステートメントでラップするなどreturn）。これにより、発生している問題を含め、あらゆる種類の奇妙な影響が発生します。

これは、スクリプト内の一部の裸のES6コードが正常に機能するがChrome Dev Toolsコンソールでは機能しない理由の1つでもあります。

NodeとChromeコンソールでこれを実行してみてください：

{ let a = 3 }

ノードまたは<script>タグでは問題なく機能しますが、コンソールではが得られUncaught SyntaxError: Unexpected identifierます。また、ソースへのリンクが表示されます。このリンクをVMxxx:1クリックすると、評価されたソースを検査できます。次のように表示されます。

({ let a = 3 })

それで、なぜこれをしたのですか？

その答えは、コードを式に変換して、結果を呼び出し元に返し、コンソールに表示できるようにする必要があるということです。これを行うには、ステートメントを括弧で囲み、式を作成しますが、上記のブロックを構文的に不正確にします（式にブロック宣言を含めることはできません）。

コンソールはコードを賢くすることでこれらのエッジケースを修正しようとしますが、それはこの回答の範囲を超えていると思います。バグを報告して、修正を検討する必要があるかどうかを確認できます。

これは非常によく似た良い例です：

https://stackoverflow.com/a/28431346/46588

コードを機能させる最も安全な方法は、コードを式として実行できることを確認し、SyntaxErrorソースリンクを調べて実際の実行コードを確認し、そこからソリューションをリバースエンジニアリングすることです。通常は、戦略的に配置された一対の括弧を意味します。

要するに：コンソールは正確にできるだけグローバル実行コンテキストをエミュレートしようとしますが、相互作用の制限のためにV8エンジンを持つとJavaScriptセマンティクスこれは時々解決するのは難しいまたは不可能です。

私はこのような質問をしました：

@getify私はこの質問をしました：#IIFEパターンを生成するには、関数宣言の周りのパランを使用してそれを関数式に変換してから呼び出します。アロー関数IIFEで、なぜ私たちはパランが必要なのですか？アロー関数は、デフォルトではすでに式ではありませんか？！

これがカイルシンプソンの答えです。

矢印関数は exprですが、 "演算子の優先順位"（sorta）のかっこb / cが必要です。そのため、arrow-IIFEを呼び出す最後のかっこは、その本体の最後のトークンだけではなく、関数全体に適用されます。 。

x => console.log(x)(4)

対

(x => console.log(x))(4)

— getify（@getify）2020年6月12日