เหตุใดผลลัพธ์จึงแตกต่างกันไปตามตำแหน่งปีกกา

เหตุใดข้อมูลโค้ดด้านล่างซึ่งนำมาจากบทความนี้จึงให้ผลลัพธ์ที่แตกต่างกันเนื่องจากการเปลี่ยนแปลงตำแหน่งของวงเล็บปีกกาเพียงครั้งเดียว

เมื่อวงเล็บปีกกาเปิด{อยู่ในบรรทัดใหม่test()จะแสดง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 ของ Douglas Crockfordซึ่งกล่าวถึงการแทรกอัฒภาค

ในตัวอย่างที่สองของคุณคุณส่งคืนวัตถุ (สร้างโดยวงเล็บปีกกา) ด้วยคุณสมบัติ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 จะเห็นว่าจะมีอะไรมากกว่านั้นและเมื่ออยู่ในบรรทัดใหม่มันคิดว่าคุณลืมใส่ ";" และวางไว้ให้คุณ

วงเล็บปีกกาที่นี่บ่งบอกถึงการสร้างวัตถุใหม่ ดังนั้นรหัสของคุณจึงเทียบเท่ากับ:

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

ซึ่งใช้งานได้ในขณะที่คุณเขียน:

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

มันไม่ทำงานอีกต่อไป

ปัญหาคือการฉีดเซมิโคลอนตามที่อธิบายไว้ข้างต้น ฉันเพิ่งอ่านบล็อกที่ดีโพสต์เกี่ยวกับเรื่องนี้ จะอธิบายปัญหานี้และข้อมูลเพิ่มเติมเกี่ยวกับจาวาสคริปต์ นอกจากนี้ยังมีข้อมูลอ้างอิงที่ดี คุณสามารถอ่านได้ที่นี่