Dlaczego wyniki różnią się w zależności od umiejscowienia aparatu ortodontycznego?

Dlaczego poniższe fragmenty kodu zaczerpnięte z tego artykułu dają różne wyniki z powodu tylko jednej zmiany w umiejscowieniu nawiasów klamrowych?

Gdy otwór nawias klamrowy {jest w nowej linii, test()powraca undefined, i „nie - złamał: niezdefiniowane” wyświetlany jest w pogotowiu.

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

Kiedy nawias znajduje się w tym samym wierszu, co return, test()zwraca obiekt i ostrzega o „fantastycznym”.

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

To jedna z pułapek JavaScript: automatyczne wstawianie średników. Wiersze, które nie kończą się średnikiem, ale mogą być końcem instrukcji, są automatycznie kończone, więc pierwszy przykład wygląda tak efektywnie:

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

Zobacz także przewodnik po stylu JS Douglasa Crockforda , w którym wspomina się o wstawianiu średników.

W drugim przykładzie zwracasz obiekt (zbudowany za pomocą nawiasów klamrowych) z właściwością javascripti jej wartością "fantastic", w rzeczywistości taką samą jak ta:

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

Javascript nie wymaga średników na końcu instrukcji, ale wadą jest to, że musi odgadnąć, gdzie są średniki. W większości przypadków nie stanowi to problemu, ale czasami tworzy średnik w miejscu, w którym nie było to zamierzone.

Przykład z mojego wpisu na blogu na ten temat ( Javascript - prawie nie oparty na wierszach ):

Jeśli sformatujesz kod w ten sposób:

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

Następnie jest interpretowany w następujący sposób:

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

Instrukcja return przyjmuje postać bez parametrów, a argument staje się własną instrukcją.

To samo dzieje się z Twoim kodem. Funkcja jest interpretowana jako:

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

Osobiście wolę styl Allman ze względu na czytelność (w porównaniu do stylu K&R).

Zamiast…

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

Podoba mi się…

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

  return obj;
}

Ale to obejście. Ale mogę z tym żyć.

Dzieje się tak, ponieważ javascript najczęściej umieszcza „;” na końcu każdej linii, więc po prostu, gdy masz return {w tej samej linii, silnik javascript widzi, że będzie coś więcej, a kiedy jest w nowej linii, myśli, że zapomniałeś wstawić ";", i umieszcza to za ciebie.

Nawiasy klamrowe wskazują tutaj budowę nowego obiektu. Zatem twój kod jest równoważny z:

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

który działa, a jeśli napiszesz:

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

to już nie działa.

Problemem jest w istocie wstrzyknięcie średnika, jak opisano powyżej. Właśnie przeczytałem dobry wpis na blogu na ten temat. Wyjaśnia ten problem i wiele więcej na temat javascript. Zawiera również dobre referencje. Możesz to przeczytać tutaj