console.log () async หรือ sync?

ฉันกำลังอ่านAsync Javascriptโดย Trevor Burnham นี่เป็นหนังสือที่ยอดเยี่ยมมาก

เขาพูดถึงตัวอย่างนี้และ console.log ว่าเป็น "async" ในคอนโซล Safari และ Chrome น่าเสียดายที่ฉันไม่สามารถจำลองสิ่งนี้ได้ นี่คือรหัส:

var obj = {}; 
console.log(obj); 
obj.foo = 'bar';
// my outcome: Object{}; 'bar';
// The book outcome: {foo:bar};

ถ้านี่คือ async ฉันจะคาดหวังว่าผลลัพธ์จะเป็นหนังสือ console.log () ใส่ไว้ในคิวเหตุการณ์จนกว่าโค้ดทั้งหมดจะถูกเรียกใช้งานจากนั้นรันและจะมีคุณสมบัติ bar

ดูเหมือนว่าจะทำงานพร้อมกัน

ฉันใช้รหัสนี้ผิดหรือไม่? console.log เป็น async จริงหรือ?

console.logไม่ได้เป็นมาตรฐานดังนั้นพฤติกรรมจึงค่อนข้างไม่มีการกำหนดและสามารถเปลี่ยนแปลงได้อย่างง่ายดายจากรุ่นสู่รุ่นของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ หนังสือของคุณมีแนวโน้มที่จะล้าสมัยเนื่องจากคำตอบของฉันในไม่ช้า

สำหรับรหัสของเรามันไม่ได้สร้างความแตกต่างใด ๆ ไม่ว่าจะconsole.logเป็นแบบ async หรือไม่ก็ไม่มีการโทรกลับใด ๆ และค่าที่คุณส่งผ่านจะถูกอ้างอิงและคำนวณเสมอเมื่อคุณเรียกใช้ฟังก์ชัน

เราไม่รู้จริงๆว่าจะเกิดอะไรขึ้น (ตกลงเราทำได้เนื่องจาก Firebug, Chrome Devtools และ Opera Dragonfly เป็นโอเพ่นซอร์สทั้งหมด) คอนโซลจะต้องจัดเก็บค่าที่บันทึกไว้ที่ใดที่หนึ่งและจะแสดงบนหน้าจอ การแสดงผลจะเกิดขึ้นแบบอะซิงโครนัสอย่างแน่นอน (ถูกควบคุมให้เป็นการอัปเดต จำกัด อัตรา) เช่นเดียวกับการโต้ตอบในอนาคตกับอ็อบเจ็กต์ที่บันทึกในคอนโซล (เช่นการขยายคุณสมบัติอ็อบเจ็กต์)

ดังนั้นคอนโซลอาจโคลน (ทำให้เป็นอนุกรม) อ็อบเจ็กต์ที่ไม่แน่นอนที่คุณบันทึกไว้หรือจะเก็บข้อมูลอ้างอิงไว้ อันแรกใช้ไม่ได้ผลกับวัตถุที่ลึก / ใหญ่ นอกจากนี้อย่างน้อยการแสดงผลครั้งแรกในคอนโซลอาจจะแสดงสถานะ "ปัจจุบัน" ของวัตถุหนึ่งคือเมื่อมันได้รับการบันทึกไว้ - Object {}ในตัวอย่างของคุณที่คุณเห็น

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

นี่คือภาพหน้าจอที่โพสต์ในรายงานข้อบกพร่องเพื่ออธิบาย "การแก้ไข":

ดังนั้นค่าบางค่าอาจถูกอ้างอิงนานหลังจากที่บันทึกไว้และการประเมินค่าเหล่านี้ค่อนข้างขี้เกียจ ("เมื่อจำเป็น") ตัวอย่างที่มีชื่อเสียงที่สุดของความคลาดเคลื่อนนี้ได้รับการจัดการในคำถามคอนโซล JavaScript ของ Chrome ขี้เกียจเกี่ยวกับการประเมินอาร์เรย์หรือไม่?

console.log(JSON.stringify(obj))การแก้ปัญหาเพื่อให้แน่ใจว่าการเข้าสู่ระบบภาพรวมต่อเนื่องของวัตถุของคุณเสมอเช่นโดยการทำ วิธีนี้ใช้ได้กับวัตถุที่ไม่เป็นวงกลมและค่อนข้างเล็กเท่านั้น ดูเพิ่มเติมฉันจะเปลี่ยนพฤติกรรมเริ่มต้นของ console.log ใน Safari ได้อย่างไร .

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

นี่ไม่ใช่คำตอบสำหรับคำถาม แต่อาจเป็นประโยชน์สำหรับคนที่สะดุดในโพสต์นี้และยาวเกินไปที่จะแสดงความคิดเห็น:

window.console.logSync = (...args) => {
  try {
    args = args.map((arg) => JSON.parse(JSON.stringify(arg)));
    console.log(...args);
  } catch (error) {
    console.log('Error trying to console.logSync()', ...args);
  }
};

สิ่งนี้จะสร้างเวอร์ชันหลอกซิงโครนัconsole.logส แต่มีข้อแม้เดียวกันกับที่กล่าวไว้ในคำตอบที่ยอมรับ

เนื่องจากในขณะนี้เบราว์เซอร์ส่วนใหญ่console.logเป็นแบบอะซิงโครนัสในบางลักษณะคุณอาจต้องการใช้ฟังก์ชันเช่นนี้ในบางสถานการณ์

เมื่อใช้ console.log:

a = {}; a.a=1;console.log(a);a.b=function(){};
// without b
a = {}; a.a=1;a.a1=1;a.a2=1;a.a3=1;a.a4=1;a.a5=1;a.a6=1;a.a7=1;a.a8=1;console.log(a);a.b=function(){};
// with b, maybe
a = {}; a.a=function(){};console.log(a);a.b=function(){};
// with b

ในสถานการณ์แรกออบเจ็กต์นั้นง่ายพอดังนั้นคอนโซลจึงสามารถ "สตริง" ให้กับคุณได้ แต่ในสถานการณ์อื่น ๆ a นั้น 'ซับซ้อนเกินไป' ถึง 'stringify' ดังนั้นคอนโซลจะแสดงวัตถุในหน่วยความจำให้คุณแทนและใช่เมื่อคุณดูที่ b ได้แนบกับไฟล์.