console.log () асинхронізація чи синхронізація?

Зараз я читаю асинхронний Javascript Тревора Бернхема. На сьогодні це чудова книга.

Він розповідає про те, що цей фрагмент і console.log є `` асинхронними '' в консолі Safari та Chrome. На жаль, я не можу повторити це. Ось код:

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

Якби це була асинхронізація, я би передбачав, що результат буде результатом книг. console.log () поміщається в чергу подій, поки не виконується весь код, після чого він запускається і має властивість bar.

Здається, він працює синхронно.

Я неправильно використовую цей код? Чи є console.log насправді асинхронним?

console.logне стандартизовано, тому поведінка досить невизначена і може бути легко змінена від випуску до випуску інструментів розробника. Ваша книга, швидше за все, застаріла, як і моя відповідь найближчим часом.

Для нашого коду це не має значення console.log, асинхронний чи ні, він не передбачає жодного зворотного дзвінка або близько того; а передані вами значення завжди посилаються та обчислюються під час виклику функції.

Ми насправді не знаємо, що відбувається тоді (добре, ми могли б, оскільки 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 занадто "складний", щоб "натягнути", тому консоль замість нього покаже вам об'єкт в пам'яті, і так, коли ви дивитесь на нього, b вже приєднано до a.