Warum variieren die Ergebnisse je nach Platzierung der geschweiften Klammer?

Warum führen die folgenden Codefragmente aus diesem Artikel aufgrund nur einer einzigen Änderung der Platzierung von geschweiften Klammern zu unterschiedlichen Ergebnissen?

Wenn sich die öffnende geschweifte Klammer {in einer neuen Zeile befindet, test()kehrt sie zurück undefinedund in der Warnung wird "Nein - es ist gebrochen: undefiniert" angezeigt.

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);
}

Wenn sich die Klammer in derselben Zeile befindet wie return, wird test()ein Objekt zurückgegeben und "fantastisch" wird alarmiert.

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);
}

Dies ist eine der Gefahren von JavaScript: das automatische Einfügen von Semikolons. Zeilen, die nicht mit einem Semikolon enden, sondern das Ende einer Anweisung sein können, werden automatisch beendet, sodass Ihr erstes Beispiel effektiv so aussieht:

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

Siehe auch Douglas Crockfords JS-Styleguide , in dem das Einfügen von Semikolons erwähnt wird.

In Ihrem zweiten Beispiel geben Sie ein Objekt (das durch geschweifte Klammern gebildet wird) mit der Eigenschaft javascriptund ihrem Wert von zurück "fantastic", praktisch wie folgt:

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

Javascript benötigt keine Semikolons am Ende von Anweisungen, aber der Nachteil ist, dass es erraten muss, wo sich die Semikolons befinden. Meistens ist dies kein Problem, aber manchmal erfindet es ein Semikolon, in dem Sie keines beabsichtigt haben.

Ein Beispiel aus meinem Blogbeitrag dazu ( Javascript - fast nicht zeilenbasiert ):

Wenn Sie den Code wie folgt formatieren:

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

Dann wird es so interpretiert:

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

Die return-Anweisung hat ihre parameterlose Form und das Argument wird zu einer eigenen Anweisung.

Das gleiche passiert mit Ihrem Code. Die Funktion wird interpretiert als:

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

Ich persönlich bevorzuge den Allman-Stil aus Gründen der Lesbarkeit (im Vergleich zum K & R-Stil).

Anstatt…

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

Ich mag…

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

  return obj;
}

Aber das ist eine Umgehung. Ich kann aber damit leben.

Es ist, weil Javascript am häufigsten ";" Am Ende jeder Zeile, also im Grunde genommen, wenn Sie {in derselben Zeile zurückgegeben haben, sieht die Javascript-Engine, dass es etwas mehr geben wird, und wenn es in einer neuen Zeile steht, denkt sie, Sie hätten vergessen, ";" zu setzen, und setzt es für Sie.

Die geschweiften Klammern zeigen hier die Konstruktion eines neuen Objekts an. Ihr Code entspricht also:

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

was funktioniert, wenn Sie schreiben:

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

es funktioniert nicht mehr

Das Problem ist in der Tat die Semikoloninjektion wie oben beschrieben. Ich habe gerade einen guten Blogbeitrag zu diesem Thema gelesen. Es erklärt dieses Problem und vieles mehr über Javascript. Es enthält auch einige gute Referenzen. Sie können es hier lesen