80


15

中括弧の配置によって結果が異なるのはなぜですか?

http://robertnyman.com/2008/10/16/beware-of-javascript-semicolon-insertion/ [この記事]から取られた以下のコードスニペットが、配置の変更が1つしかないために異なる結果を生成する理由中括弧の

開き中括弧 `{`が新しい行にあるとき、 `test()`は `undefined`を返し、「いいえ-壊れました:undefined」がアラートに表示されます。

function test()
{
  return
  { /* <--- curly brace on new line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

中括弧が「return」と同じ行にある場合、「test()」はオブジェクトを返し、「fantastic」が警告されます。

function test()
{
  return { /* <---- curly brace on same line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

6 Answer


122


これはJavaScriptの落とし穴の1つです。自動セミコロン挿入です。 セミコロンで終わらないが、文の終わりである可能性がある行は自動的に終了するため、最初の例は次のようになります。

function test()
{
  return; // <- notice the inserted semicolon
  {
    javascript: "fantastic"
  };
}

Douglas Crockford’s JS style guideも参照してください。これにはセミコロンの挿入が記載されています。

2番目の例では、プロパティ `javascript`とその値が" "fantastic" `であるオブジェクト(中括弧で構築された)を返します。これは事実上これと同じです:

function test() {
    var myObject = new Object();
    myObject.javascript = "fantastic";
    return myObject;
}


7


Javascriptはステートメントの最後にセミコロンを必要としませんが、欠点はセミコロンがどこにあるかを推測する必要があることです。 ほとんどの場合、これは問題ではありませんが、意図しないセミコロンを作成する場合があります。

これに関する私のブログ投稿の例(http://blog.guffa.com/2010/02/javascript-almost-not-line-based/[Javascript-ほとんど行ベースではない]):

このようにコードをフォーマットする場合:

function getAnswer() {
   var answer = 42;
   return
      answer;
}

次に、次のように解釈されます。

function getAnswer() {
  var answer = 42;
  return;
  answer;
}

returnステートメントはパラメーターのない形式を取り、引数はそれ自体のステートメントになります。

同じことがコードにも起こります。 関数は次のように解釈されます:

function test()
{
  return;
  {
    javascript : "fantastic"
  };
}


1


それは、javascriptが「;」を最もよく使用するためです。各行の最後にあるので、基本的に、同じ行に\ {を返すと、javascriptエンジンはさらに何かがあることを確認し、新しい行に「;」を置くのを忘れたと判断し、それをあなたのために置きます。


1


問題は、上記のセミコロン注入です。 このテーマに関する良いブログ投稿を読んだばかりです。 この問題について説明し、javascriptについてさらに詳しく説明します。 また、いくつかの優れたリファレンスも含まれています。 あなたはそれを読むことができますhttp://skilldrick.co.uk/2010/09/why-javascript-is-awesome/ [こちら]


1


ここで中括弧は、新しいオブジェクトの構築を示します。 したがって、あなたのコードは次と同等です:

function test() {
  var a = { javascript : "fantastic" };
  return a;
}

あなたが書く場合、それは動作します:

function test() {
  var a = { javascript : "fantastic" };
  return; // ; is automatically inserted
      a;
}

動作しなくなりました。


0


私は個人的に読みやすさのためにオールマンスタイルを好みます(対K&Rスタイル)。

の代わりに…

function test() {
  return {
    javascript : "fantastic"
  };
}

好き…

function test()
{
  var obj =
  {
    javascript : "fantastic"
  };

  return obj;
}

しかし、これは回避策です。 私はそれで生きることができます。