[javascript] Chrome 디버거가 닫힌 로컬 변수가 정의되지 않은 이유는 무엇입니까?

나는 당신이 요구하는 것에 관한 v8 이슈 보고서 를 발견했습니다 .

이제 해당 이슈 보고서에서 말한 내용을 요약하면 … v8은 함수의 로컬 변수를 스택 또는 힙에있는 “컨텍스트”개체에 저장할 수 있습니다 . 함수에 변수를 참조하는 내부 함수가 포함되어 있지 않으면 스택에 로컬 변수를 할당합니다. 최적화 입니다. 경우 모든 내부 함수는 로컬 변수를 참조,이 변수 (힙 대신 스택 IE) 콘텍스트 객체에 넣어지게된다. 의 경우 eval는 특별합니다. 내부 함수에 의해 전혀 호출되지 않으면 모든 로컬 변수가 컨텍스트 객체에 배치됩니다.

컨텍스트 객체의 이유는 일반적으로 외부 함수에서 내부 함수를 반환 할 수 있으며 외부 함수가 실행되는 동안 존재하는 스택을 더 이상 사용할 수 없기 때문입니다. 따라서 내부 함수가 액세스하는 것은 외부 함수에서 생존하고 스택이 아닌 힙에 있어야합니다.

디버거는 스택에있는 변수를 검사 할 수 없습니다. 디버깅에서 발생하는 문제와 관련하여 한 프로젝트 멤버 는 다음과 같이 말합니다 .

내가 생각할 수있는 유일한 해결책은 devtools가 켜질 때마다 모든 코드를 선택 해제하고 강제 컨텍스트 할당으로 다시 컴파일한다는 것입니다. devtools를 사용하면 성능이 크게 저하됩니다.

다음은 “내부 함수가 변수를 참조하는 경우 컨텍스트 객체에 넣습니다”의 예입니다. 이것을 실행하면 결코 호출되지 않는 함수 에서만 사용 되지만 명령문 x에서 액세스 할 수 있습니다 !debuggerxfoo

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

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

  function bar() {
    debugger;
  };

  bar();
}
baz();

답변

eval('debugger');

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

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

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

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

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