이 기사에서는 주로 js의 범위, 사전 구문 분석 메커니즘 및 관련 코드 분석에 대한 자세한 분석을 제공합니다. 이에 관심이 있는 친구는 이 기사에서 배울 수 있습니다.
ES6가 우리 작업에서 점점 더 광범위하게 사용되고 있지만 많은 프로젝트에서는 여전히 ES5 작성 방법을 유지하고 있습니다. 따라서 오늘은 ES5에서 범위와 사전 구문 분석 메커니즘을 다시 통합하도록 하겠습니다.
범위: 도메인은 공간, 범위, 영역을 의미하며 해당 기능은 도메인 내에서 읽기 및 쓰기 작업을 수행할 수 있음을 의미합니다. 변수의 범위는 프로그램 소스 코드에서 변수가 정의된 영역입니다.
ES5에는 전역 및 함수 수준 범위만 있습니다. ES6에는 블록 수준 범위가 도입되었습니다. js의 사전 구문 분석 메커니즘은 대략 사전 구문 분석과 하향식 라인별 두 가지 프로세스로 나뉩니다. 라인 해석
사전 구문 분석: js 파서는 먼저 var에 의해 정의된 변수, 함수, 매개변수 및 기타 사항을 웨어하우스(메모리)에 저장합니다. var 변수가 공식적으로 실행되기 전에는 undefined 값이 할당됩니다. 함수 function이 실행되기 전에는 전체 함수 블록
표현식 =, +, -, *, /, ++, --,! , %....number(), 매개변수는 모두 할당 가능합니다.
이름이 중복되면 하나만 남게 됩니다. 변수와 함수는 동일한 이름을 가지며 함수만 할당됩니다.
함수 호출(함수는 범위입니다. 범위를 만나면 먼저 사전 구문 분석한 후 한 줄씩 해석하는 과정에 따라 실행됩니다.) 먼저 로컬에서 매개 변수를 찾습니다. 현지에서 찾을 수 없으니 아래에서 위로 찾아보세요(스코프 체인)
개념이 어이가 없습니다. 긴 구간의 경우 초보자는 아직 조금 어지러울 것으로 추정되므로 숙련된 운전자는 버스에서 내릴 수 있습니다. 다음으로 몇 가지 예를 제시하고 이를 위의 이론과 결합하여 더 깊이 이해해 보겠습니다.
예제 1:
alert(a); //error: a is not defined a = 3;
분석:
사전 구문 분석
위에서 언급했듯이 사전 구문 분석 중에는 var, 함수, 매개 변수 등만 저장되므로:
Var을 찾을 수 없습니다. 전체 범위에서 함수 매개변수
한 줄씩 해석
사전 구문 분석 후 a가 메모리에 존재하고 전체 underfind 변수의 값이 할당되므로 코드 실행 중에 프로그램이 직접 오류를 보고합니다.
예제 2:
alert(a); //undefined var a = 3;
분석:
사전 구문 분석
위에서 언급했듯이 사전 구문 분석 중에는 var, 함수, 매개 변수 등만 저장되므로:
두 번째 줄까지 실행하면, a의 값이 정의되지 않았습니다.
한 줄씩 해석
첫 번째 줄: 사전 구문 분석 후 a가 메모리에 존재하고 underfined로 할당됩니다
예 3:
alert(a); // function a (){ alert(4); } var a = 1; alert(a); // 1 function a (){ alert(2); } alert(a); // 1 var a = 3; alert(a); // 3 function a (){ alert(4); } alert(a); // 3
분석:
도메인 구문 분석
위에서 언급한 것처럼, 다음 경우에만 사전 구문 분석은 var, 함수, 매개변수 등을 저장하므로
두 번째 줄까지 실행될 때 a 값은 정의되지 않습니다.
실행이 네 번째 줄에 도달하면 a의 값은 함수 자체, 즉 function a(){alert(2);}입니다.
실행이 여섯 번째 줄에 도달하면 a의 값은 여전히 네 번째 줄의 값, 즉 함수 a(){alert(2);}의 값입니다. 왜냐하면 함수가 변수보다 우선순위가 높기 때문입니다.
실행이 8번째 줄에 도달하면 a의 값은 function a(){alert(4);}가 됩니다. 두 함수의 이름이 같으면 코드가 위에서 아래로 실행되기 때문입니다.
한 줄씩 해석
사전 구문 분석이 완료되면 코드가 한 줄씩 실행됩니다.
첫 번째 줄: function a(){alert(4);}가 팝업됩니다. 구문 분석이 완료되면 메모리에 저장됩니다. a의 값은 function a(){alert(4);}
두 번째 줄: 두 번째 줄에는 a에 새 값 1이 할당되는 표현식이 있습니다. 변수의 값이 변경됩니다. 표현식은 준비된 값을 변경할 수 있습니다.
세 번째 줄: a에 이제 1의 값이 할당되고 1이 모두 나타납니다.
네 번째 줄: 함수 선언일 뿐이고 표현식이 사용되지 않으며 함수 호출도 없으므로 값은 a는 변경되지 않습니다.
다섯 번째 줄: a의 값이 변하지 않았기 때문에 여전히 1입니다
여섯 번째 줄: 표현식을 사용하여 a에 새 값 3이 할당됩니다.
일곱 번째 줄: 3이 나타납니다
여덟 번째 줄 line: 함수 선언은 a의 값을 변경하지 않습니다.
9행: a의 값은 변경되지 않았으므로 여전히 3입니다.
위의 예를 통해 모든 사람이 변수 범위의 사전 구문 분석 과정을 어느 정도 이해해야 한다고 생각합니다. 다음으로 몇 가지를 더 설명하겠습니다. Domain chestnut
예 4:
var a=1; function fn1(){ alert(a); //undefined var a = 2; } fn1(); alert(a) //1
예 5:
var a=1; function fn1(a){ alert(a); //1 var a = 2; } fn1(a); alert(a) //1
예 6:
var a=1; function fn1(a){ alert(a); //1 a = 2; } fn1(a); alert(a) //1
예 7:
var a=1; function fn1(){ alert(a); //1 a = 2; } fn1(a); alert(a) //2
위 내용은 제가 모두를 위해 편집한 것입니다. 나는 그것을 바란다 앞으로 모든 사람에게 도움이 될 것입니다.
관련 기사:
jquery에서 스타일이 포함된 HTML 태그 요소를 동적으로 추가하는 방법
node.js에서 fs 파일 시스템 디렉터리 작업과 파일 정보 작업을 구현하는 방법은 무엇입니까?
jQuery에서 li 태그를 동적으로 추가하고, 속성을 추가하고, 이벤트 메서드를 바인딩하는 방법
위 내용은 Node.js 범위 및 사전 구문 분석 메커니즘(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!