Чому налагоджувач Chrome вважає, що закрита локальна змінна не визначена?

З цим кодом:

function baz() {
  var x = "foo";

  function bar() {
    debugger;
  };
  bar();
}
baz();

Я отримую цей несподіваний результат:

Коли я змінюю код:

function baz() {
  var x = "foo";

  function bar() {
    x;
    debugger;
  };
  bar();
}

Я отримую очікуваний результат:

Крім того, якщо є якийсь виклик до evalвнутрішньої функції, я можу отримати доступ до своєї змінної так, як хочу зробити (неважливо, до чого я переходжу eval)

Тим часом інструменти розробки Firefox надають очікувану поведінку в обох обставинах.

Що з Chrome, що налагоджувач поводиться менш зручно, ніж Firefox? Я спостерігав за такою поведінкою деякий час, аж до версії 41.0.2272.43 бета (64-бітної).

Це те, що двигун javascript у Chrome «розгладжує» функції, коли може?

Цікаво , якщо я додаю другу змінну , яка буде посилатися у внутрішній функції, то xзмінна ще НЕ визначена.

Я розумію, що часто використовуються примхи із визначенням обсягу та змінної при використанні інтерактивного налагоджувача, але мені здається, що на основі мовної специфікації повинно бути "найкращим" рішенням цих вигадок. Тож мені дуже цікаво, якщо це пов’язано з тим, що Chrome оптимізується далі, ніж Firefox. А також, можна легко відключити ці оптимізації під час розробки (можливо, їх слід було б відключити, коли відкриті інструменти розробки?).

Крім того, я можу відтворити це за допомогою точок прориву, а також debuggerзаяви.

Я знайшов звіт про проблему v8, який саме стосується того, що ви запитуєте.

Тепер, щоб узагальнити те, що сказано в цьому звіті про випуск ... v8 може зберігати змінні, які є локальними для функції в стеці або в "контекстному" об'єкті, що живе в купі. Він буде виділяти локальні змінні на стеку до тих пір, поки функція не містить жодної внутрішньої функції, яка посилається на них. Це оптимізація . Якщо будь-яка внутрішня функція посилається на локальну змінну, ця змінна буде розміщена в контекстному об'єкті (тобто в купі, а не в стеку). Випадок evalспецифічний: якщо він взагалі викликається внутрішньою функцією, всі локальні змінні розміщуються в контекстному об'єкті.

Причиною контекстного об'єкта є те, що загалом ви можете повернути внутрішню функцію із зовнішньої, і тоді стек, який існував під час запуску зовнішньої функції, більше не буде доступний. Тож усе, що має внутрішня функція, має змогу пережити зовнішню функцію та жити на купі, а не на стеці.

Відладчик не може перевірити ті змінні, які знаходяться в стеку. Щодо проблеми, що виникає при налагодженні, один учасник проекту каже :

Єдине рішення, про яке я міг придумати, - це те, що коли буде ввімкнено devtools, ми видалимо весь код і перекомпілюватимемо з примусовим розподілом контексту. Це різко погіршить продуктивність із ввімкненою програмою devtools.

Ось приклад "якщо будь-яка внутрішня функція посилається на змінну, поставте її в контекстний об'єкт". Якщо це запустити, ви зможете отримати доступ xдо debuggerоператора, хоча xвін використовується лише у fooфункції, яка ніколи не викликається !

function baz() {
  var x = "x value";
  var z = "z value";

  function foo () {
    console.log(x);
  }

  function bar() {
    debugger;
  };

  bar();
}
baz();

Як @Louis сказав, що це викликано оптимізаціями v8. Ви можете пройти стек виклику до кадру, де видно цю змінну:

Або замінити debuggerна

eval('debugger');

eval відірве поточний шматок

Я також помітив це у nodejs. Я вважаю (і я визнаю, що це лише здогадка), що коли код компілюється, якщо xвін не з’являється всередині bar, він не робить xдоступним у межах області bar. Це, ймовірно, робить її трохи більш ефективною; проблема полягає в тому, що хтось забув (або не хвилював), що навіть якщо немає xв ньому bar, ви можете вирішити запустити налагоджувач, а отже, все одно потрібно отримати доступ xзсередини bar.

Ух, справді цікаво!

Як зазначали інші, це, мабуть, пов'язане scope, але конкретніше, пов'язане з цим debugger scope. Коли введений скрипт оцінюється в інструментах розробника, він, схоже, визначає a ScopeChain, що призводить до певної химерності (оскільки він пов'язаний з областю інспектора / налагоджувача). Варіація того, що ви опублікували:

(EDIT - насправді, ви згадуєте це у своєму первісному запитанні, поступається, моє погано! )

function foo() {
  var x = "bat";
  var y = "man";

  function bar() {
    console.log(x); // logs "bat"

    debugger; // Attempting to access "y" throws the following
              // Uncaught ReferenceError: y is not defined
              // However, x is available in the scopeChain. Weird!
  }
  bar();
}
foo();

Для амбітних та / або цікавих, виберіть джерело (хе), щоб побачити, що відбувається:

https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/inspector https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/debugger

Я підозрюю, що це стосується підйому змінної та функції. JavaScript приводить всі оголошення змінних та функцій до вершини функції, в якій вони визначені. Детальніше тут: http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

Б'юсь об заклад, що Chrome називає точку розриву зі змінною, недоступною для області застосування, оскільки нічого іншого немає у функції. Це, здається, працює:

function baz() {
  var x = "foo";

  function bar() {
    console.log(x); 
    debugger;
  };
  bar();
}

Як це робиться:

function baz() {
  var x = "foo";

  function bar() {
    debugger;
    console.log(x);     
  };
  bar();
}

Сподіваємось, що це та / або вище посилання допомагає. Це мій улюблений вид SO-питань, BTW :)