{} 処理の JavaScript 構文の落とし穴について詳しく説明_基礎知識

JavaScript の構文がいかに悲惨であるかは誰もが知っています。

まず写真を撮りましょう

コードは次のとおりです:

コードをコピーします コードは次のとおりです。

{} // 0
[ ] {} // "[オブジェクト オブジェクト]"
{} [] == [] {} // false
({} [] == [] {}); true

このような厄介な構文の落とし穴は、おそらく JavaScript のような奇妙なものでのみ見られます。

JavaScript コンパイラを勉強していないほとんどの子供たちはまったく理解できないと思います。 (少なくとも私は信じられないほどだと思います)

その後、母の特別訪問に行って、はたと気づきました！

次に、このコードを見てみましょう:

コードをコピー コードは次のとおりです:

{
a: 1
}

ほとんどの子供用靴は、一見するとこれがオブジェクトの直接的な量であると考えると思います。

このコードはどうでしょうか?

コードをコピー コードは次のとおりです。

{
var a = 1;
}

ブラウザでは構文エラーが表示されますか?

明らかにそうではありません!よく考えてみると、これはステートメントブロックであることがわかります。

コードをコピー コードは次のとおりです。

if (isNumber) {
var a = 1 ;
}

この時点で、熱心な方ならお気づきかもしれませんが、{ で始まる JavaScript にはあいまいさが存在します。

JavaScript コンパイラーはこの曖昧さにどのように対処するのでしょうか?

この問題を解決するために、ECMA の方法は非常に単純かつ粗雑です。文法解析中に、ステートメントが "{" で始まる場合、それはステートメント ブロックとしてのみ解釈されます。

これは本当に不正な対処方法です。

これらはすべてステートメントブロックであるのに、なぜ {a:1} には文法上の誤りがないのでしょうか?

実際、ここでは、 a はパーサーによってタグとして理解されます。ラベルは、方向へのジャンプを行うために、break および continue ステートメントとともに使用されます。

したがって、次のように記述すると例外がスローされます:

コードをコピー コードは次のとおりです:

{
a: function () {}
}

function () {} は関数宣言でも関数式でもないからです。

この時点で、誰もが {} の奇妙な処理についての基本的な概念を理解できるはずです。記事の冒頭で述べた文を振り返ってみましょう:

コードをコピーします コードは次のとおりです。

{} // 0
[ ] {} // "[オブジェクト オブジェクト]"
{} [] == [] {} // false
({} [] == [] {}); true

最初のコードは、{} がステートメント ブロックであるため、コードは次のように理解できます:

コードをコピー コードは次のとおりです。

if (1) {}
[]

つまり、戻り値は 0 です。

2 番目に、{} がステートメントの先頭にないため、通常のオブジェクトの直接量であり、空の配列と空のオブジェクトが直接追加され、「[object Object]」が返されます。

最初の項目と 2 番目の項目は理解できました。3 番目の項目はもう説明する必要はありません。

4 番目の式は () で始まるため、最初の {} はオブジェクト リテラルとして解析されるため、2 つの式は等しく、true を返します。