Tại sao kết quả thay đổi dựa trên vị trí dấu ngoặc nhọn?

Tại sao các đoạn mã dưới đây, được lấy từ bài viết này , lại tạo ra các kết quả khác nhau do chỉ một thay đổi duy nhất về vị trí của các dấu ngoặc nhọn?

Khi dấu ngoặc nhọn mở {trên một dòng mới, test()trả về undefinedvà "no - it break: undefined" được hiển thị trong cảnh báo.

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

Khi dấu ngoặc nhọn trên cùng dòng với return, test()trả về một đối tượng và "tuyệt vời" được cảnh báo.

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

Đó là một trong những cạm bẫy của JavaScript: tự động chèn dấu chấm phẩy. Các dòng không kết thúc bằng dấu chấm phẩy, nhưng có thể là cuối câu lệnh, sẽ tự động kết thúc, vì vậy ví dụ đầu tiên của bạn trông giống như sau:

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

Xem thêm hướng dẫn kiểu JS của Douglas Crockford , đề cập đến việc chèn dấu chấm phẩy.

Trong ví dụ thứ hai, bạn trả về một đối tượng (được tạo bởi dấu ngoặc nhọn) với thuộc tính javascriptvà giá trị của nó "fantastic", thực sự giống như sau:

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

Javascript không yêu cầu dấu chấm phẩy ở cuối câu lệnh, nhưng hạn chế là nó phải đoán vị trí của dấu chấm phẩy. Hầu hết thời gian đây không phải là một vấn đề, nhưng đôi khi nó phát minh ra một dấu chấm phẩy mà bạn không có ý định.

Một ví dụ từ bài đăng trên blog của tôi về điều này ( Javascript - hầu như không dựa trên dòng ):

Nếu bạn định dạng mã như thế này:

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

Sau đó, nó được hiểu như thế này:

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

Câu lệnh trả về có dạng không tham số và đối số trở thành một câu lệnh của riêng nó.

Điều tương tự cũng xảy ra với mã của bạn. Hàm được hiểu là:

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

Cá nhân tôi thích Phong cách Allman hơn vì dễ đọc (so với phong cách K&R).

Thay vì…

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

Tôi thích…

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

  return obj;
}

Nhưng đây là một công việc xung quanh. Tôi có thể sống với nó mặc dù.

Đó là bởi vì javascript thường đặt ";" ở cuối mỗi dòng, vì vậy về cơ bản khi bạn trả về {trong cùng một dòng, công cụ javascript thấy rằng sẽ có thêm thứ gì đó và khi ở dòng mới, nó nghĩ rằng bạn đã quên đặt ";" và đặt nó cho bạn.

Dấu ngoặc nhọn ở đây cho biết cấu trúc của một đối tượng mới. Do đó, mã của bạn tương đương với:

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

hoạt động trong khi nếu bạn viết:

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

nó không còn hoạt động.

Vấn đề thực sự là tiêm dấu chấm phẩy như đã mô tả ở trên. Tôi vừa đọc một bài blog tốt về chủ đề này. Nó giải thích vấn đề này và nhiều hơn nữa về javascript. Nó cũng chứa một số tài liệu tham khảo tốt. Bạn có thể đọc nó ở đây