Почему результаты различаются в зависимости от расположения фигурных скобок?

Почему приведенные ниже фрагменты кода, взятые из этой статьи , дают разные результаты из-за всего лишь одного изменения в расположении фигурных скобок?

Когда открывающая фигурная скобка {находится на новой строке, 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()возвращает объект, и предупреждается "фантастический".

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

Это одна из ловушек JavaScript: автоматическая вставка точки с запятой. Строки, которые не заканчиваются точкой с запятой, но могут быть концом оператора, автоматически завершаются, поэтому ваш первый пример выглядит примерно так:

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

См. Также руководство по стилю JS Дугласа Крокфорда , в котором упоминается вставка точки с запятой.

Во втором примере вы возвращаете объект (построенный фигурными скобками) со свойством javascriptи его значением "fantastic", фактически таким же, как этот:

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

Javascript не требует точек с запятой в конце операторов, но недостатком является то, что он должен угадывать, где находятся точки с запятой. В большинстве случаев это не проблема, но иногда возникает точка с запятой там, где вы ее не намеревались.

Пример из моего сообщения в блоге об этом ( Javascript - почти не линейный ):

Если вы отформатируете код так:

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

Тогда это интерпретируется так:

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

Оператор return принимает форму без параметров, а аргумент становится самостоятельным утверждением.

То же самое происходит с вашим кодом. Функция интерпретируется как:

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

Я лично предпочитаю стиль Allman для удобочитаемости (а не стиль K&R).

Вместо того…

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

Мне нравиться…

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

  return obj;
}

Но это обходной путь. Хотя я могу жить с этим.

Это потому, что javascript чаще всего ставит ";" в конце каждой строки, поэтому обычно, когда вы возвращаете {в той же строке, движок javascript видит, что будет что-то еще, и когда он в новой строке, он думает, что вы забыли поставить ";", и помещает его для вас.

Фигурные скобки здесь указывают на создание нового объекта. Таким образом, ваш код эквивалентен:

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

который работает, тогда как если вы напишете:

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

это больше не работает.

Проблема действительно заключается в введении точки с запятой, как описано выше. Я только что прочитал хорошую запись в блоге на эту тему. В нем объясняется эта проблема и многое другое о javascript. Он также содержит несколько хороших ссылок. Вы можете прочитать это здесь