console.log () không đồng bộ hay đồng bộ hóa?

Tôi hiện đang đọc Async Javascript của Trevor Burnham. Đây là một cuốn sách tuyệt vời cho đến nay.

Anh ấy nói về đoạn mã này và console.log là 'không đồng bộ' trong bảng điều khiển Safari và Chrome. Thật không may, tôi không thể lặp lại điều này. Đây là mã:

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

Nếu điều này không đồng bộ, tôi sẽ đoán trước kết quả là kết quả của sách. console.log () được đặt trong hàng đợi sự kiện cho đến khi tất cả mã được thực thi, sau đó nó được chạy và nó sẽ có thuộc tính thanh.

Nó xuất hiện mặc dù nó đang chạy đồng bộ.

Tôi đang chạy mã này sai? Console.log có thực sự không đồng bộ không?

console.logkhông được tiêu chuẩn hóa, vì vậy hành vi là khá không xác định và có thể được thay đổi dễ dàng từ khi phát hành cho đến khi phát hành các công cụ dành cho nhà phát triển. Cuốn sách của bạn có thể đã lỗi thời, câu trả lời của tôi có thể sẽ sớm thôi.

Đối với mã của chúng tôi, nó không tạo ra bất kỳ sự khác biệt nào cho dù console.logkhông đồng bộ hay không, nó không cung cấp bất kỳ loại gọi lại nào hoặc tương tự như vậy; và các giá trị bạn chuyển luôn được tham chiếu và tính toán tại thời điểm bạn gọi hàm.

Chúng tôi không thực sự biết điều gì sẽ xảy ra sau đó (OK, chúng tôi có thể, vì Firebug, Chrome Devtools và Opera Dragonfly đều là mã nguồn mở). Bàn điều khiển sẽ cần lưu trữ các giá trị đã ghi ở đâu đó và nó sẽ hiển thị chúng trên màn hình. Kết xuất chắc chắn sẽ xảy ra không đồng bộ (được điều chỉnh để cập nhật giới hạn tốc độ), cũng như các tương tác trong tương lai với các đối tượng đã ghi trong bảng điều khiển (như mở rộng thuộc tính đối tượng).

Vì vậy, bảng điều khiển có thể sao chép (tuần tự hóa) các đối tượng có thể thay đổi mà bạn đã ghi nhật ký hoặc nó sẽ lưu trữ các tham chiếu đến chúng. Cái đầu tiên không hoạt động tốt với các đối tượng sâu / lớn. Ngoài ra, ít nhất kết xuất ban đầu trong bảng điều khiển có thể sẽ hiển thị trạng thái "hiện tại" của đối tượng, tức là trạng thái khi nó được đăng nhập - trong ví dụ của bạn, bạn thấy Object {}.

Tuy nhiên, khi bạn mở rộng đối tượng để kiểm tra thêm các thuộc tính của nó, có khả năng bảng điều khiển sẽ chỉ lưu trữ một tham chiếu đến đối tượng của bạn và các thuộc tính của nó, và việc hiển thị chúng bây giờ sẽ hiển thị trạng thái hiện tại (đã bị đột biến) của chúng. Nếu bạn nhấp vào +, bạn sẽ có thể xem thuộc bartính trong ví dụ của mình.

Đây là ảnh chụp màn hình đã được đăng trong báo cáo lỗi để giải thích "bản sửa lỗi" của họ:

Vì vậy, một số giá trị có thể được tham chiếu rất lâu sau khi chúng được ghi lại và việc đánh giá chúng khá lười biếng ("khi cần"). Ví dụ nổi tiếng nhất về sự khác biệt này được xử lý trong câu hỏi Bảng điều khiển JavaScript của Chrome có lười đánh giá mảng không?

Một cách giải quyết là đảm bảo luôn ghi nhật ký các ảnh chụp nhanh được tuần tự hóa của các đối tượng của bạn, ví dụ: bằng cách thực hiện console.log(JSON.stringify(obj)). Tuy nhiên, điều này sẽ chỉ hoạt động đối với các đối tượng không tròn và khá nhỏ. Xem thêm Làm cách nào để thay đổi hành vi mặc định của console.log trong Safari? .

Giải pháp tốt hơn là sử dụng các điểm ngắt để gỡ lỗi, nơi việc thực thi hoàn toàn dừng lại và bạn có thể kiểm tra các giá trị hiện tại tại mỗi điểm. Chỉ sử dụng ghi nhật ký với dữ liệu có thể tuần tự hóa và bất biến.

Đây thực sự không phải là một câu trả lời cho câu hỏi, nhưng nó có thể hữu ích cho những người tình cờ gặp bài đăng này và đã quá lâu để đưa ra nhận xét:

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

Điều này tạo ra một phiên bản giả đồng bộ của console.log, nhưng với cùng những cảnh báo như đã đề cập trong câu trả lời được chấp nhận.

Vì hiện tại, hầu hết các trình duyệt console.logđều không đồng bộ theo một cách nào đó, bạn có thể muốn sử dụng một chức năng như thế này trong một số trường hợp nhất định.

Khi sử dụng 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

trong tình huống đầu tiên, đối tượng đủ đơn giản, vì vậy console có thể 'xâu chuỗi' nó sau đó trình bày cho bạn; nhưng trong các tình huống khác, a quá 'phức tạp' để 'stringify' vì vậy giao diện điều khiển sẽ hiển thị cho bạn đối tượng trong bộ nhớ thay vào đó, và vâng, khi bạn nhìn vào nó, b đã được gắn với a.