이번에는 js 스코프 사용 및 사전 파싱에 대해 자세히 설명하겠습니다. js 스코프 사용 및 사전 파싱에 대한 주의 사항은 무엇인가요?
ES6가 우리 작업에서 점점 더 광범위하게 사용되고 있지만 많은 프로젝트에서는 여전히 ES5 작성 방법을 유지하고 있습니다. 따라서 오늘은 ES5에서 범위와 사전 구문 분석 메커니즘을 다시 통합하도록 하겠습니다.
범위: 도메인은 공간, 범위, 영역을 의미하며 해당 기능은 도메인 내에서 읽기 및 쓰기 작업을 수행할 수 있음을 의미합니다. 변수의 범위는 프로그램 소스 코드에서 변수가 정의된 영역입니다.
ES5에는 전역 및 함수 수준 범위만 있습니다. ES6에는 블록 수준 범위가 도입되었습니다. js의 사전 구문 분석 메커니즘은 대략 사전 구문 분석과 하향식 라인별 두 가지 프로세스로 나뉩니다. 라인 해석
사전 구문 분석: js 파서는 먼저 var에 의해 정의된 변수, 함수, 매개변수 및 기타 사항을 웨어하우스(메모리)에 저장합니다. var 변수가 공식적으로 실행되기 전에는 정의되지 않은 값이 할당됩니다. 함수 function이 실행되기 전에는 전체 함수 블록이
expression=, +, -, *, /, + +,-,! , %....숫자(), 매개변수 모두 할당 가능
중복된 이름이 있으면 하나만 남게 됩니다. 변수와 함수의 이름은 priority보다 높습니다. 그리고 함수
함수만 남게 됩니다. (함수는 범위이고, 범위를 만나면 먼저 사전 구문 분석한 다음 한 줄씩 해석하는 과정에 따라 실행됩니다.) 로컬에서 찾을 수 없는 경우 아래에서 위로 찾아보세요(스코프 체인)
개념 오랫동안 이야기를 나눈 후에도 초보자는 아직 조금 헷갈릴 수 있으니 숙련된 운전자는 하차할 수 있습니다. 다음은 작은 밤 몇개를 주고 위의 이론과 결합하여 깊이 이해해 보도록 하겠습니다.
예제 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이 나타납니다
第八行：函数的声明，不会改变a 的值。
第九行：a的值没有改变，所以还是3
通过上面的栗子，相信大家应该对变量作用域的预解析过程有一定的了解了，接下来，咋们再举几个函数作用域的栗子
例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相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 js의 범위 및 사전 구문 분석에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
