JS 선언 변수의 컴파일 원리 분석_기본 지식

JS 코드를 작성했다면 간단한 var만으로도 충분합니다. 그렇다면 JS 컴파일러 뒤에서는 무슨 일이 일어날까요? 단계별로 코드부터 시작하겠습니다.

코드 복사 코드는 다음과 같습니다.

x = 1; x);
var y = function() {
alert(x);
alert(x)
y(); >

위 코드는 또한 1, 정의되지 않음, 정답인 경우 2를 출력합니다. 나에게 있어 첫 번째 반응은 1,1,2이다. 두 번째 출력이 정의되지 않은 이유는 무엇입니까? 위에서 전역 변수 x를 명확하게 정의했는데 왜 찾을 수 없나요?

그 이유는
: js 컴파일러가 이 y 함수를 실행할 때 본문에 선언된 변수를 선언을 위해 앞으로 전진시킵니다. 예: var x=2; 컴파일러는 먼저 본문 앞에 var x를 선언합니다. 실제로 위 코드는 다음 코드와 동일합니다.


코드 복사

코드는 다음과 같습니다. x = 1; alert(x);

var y = function() {
var x;//x에는 현재 값이 할당되지 않았습니다. 한정되지 않은.

alert(x);
x = 2;
alert(x);
}
y()


이해하기 어렵지 않습니다. x =정의되지 않음. 그러나 var x = 2; 코드를 삭제하면 내부적으로 var 선언이 없습니다. 항상 범위를 검색하며 이때 x는 전역 x입니다.
좀 더 흥미로운 예를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다. var a = 1; b() { a = 10;

반환

}
경고(a); /// //////////////////
var a = 1
function b() {
a
return;
function a() {}
} b(); Alert(a)


예제는 매우 간단합니다. 첫 번째 예에서는 10이 출력되고 두 번째 예에서는 1이 출력됩니다. 왜 이런가요? 게다가 두 번째 예를 반환했습니다. 논리적으로 10이 출력되어야 합니다! 당시에는 JS 컴파일러가 뒤에서 문제를 일으키고 있었기 때문이었습니다.
두 코드의 차이점은 두 번째 예에는 추가 함수 a(){}가 있으므로 이 함수 본문에는 아무것도 없고 호출도 이루어지지 않는다는 것입니다.

사실 JS 컴파일러는 뒤에서 함수 a() {}를 var a=function (){}으로 컴파일합니다. 이때 함수 ​​내부에는 a=10도 있습니다. JS 범위에 따르면 a의 외부는 여전히 1입니다. 먼저 내부의 a를 찾아보고, 못찾으면 한 단계 위로 올라가서 찾아보도록 하겠습니다.
마지막 경고(a)에는 1이 표시됩니다.