집 >웹 프론트엔드 >JS 튜토리얼 >js의 범위 및 사전 구문 분석에 대한 자세한 설명

js의 범위 및 사전 구문 분석에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-23 15:35:361657검색

이번에는 js 스코프 사용 및 사전 파싱에 대해 자세히 설명하겠습니다. js 스코프 사용 및 사전 파싱에 대한 주의 사항은 무엇인가요?

ES6가 우리 작업에서 점점 더 광범위하게 사용되고 있지만 많은 프로젝트에서는 여전히 ES5 작성 방법을 유지하고 있습니다. 따라서 오늘은 ES5에서 범위와 사전 구문 분석 메커니즘을 다시 통합하도록 하겠습니다.

개념:

범위: 도메인은 공간, 범위, 영역을 의미하며 해당 기능은 도메인 내에서 읽기 및 쓰기 작업을 수행할 수 있음을 의미합니다. 변수의 범위는 프로그램 소스 코드에서 변수가 정의된 영역입니다.

ES5에는 전역 및 함수 수준 범위만 있습니다. ES6에는 블록 수준 범위가 도입되었습니다. js의 사전 구문 분석 메커니즘은 대략 사전 구문 분석과 하향식 라인별 두 가지 프로세스로 나뉩니다. 라인 해석

사전 구문 분석: js 파서는 먼저 var에 의해 정의된 변수, 함수, 매개변수 및 기타 사항을 웨어하우스(메모리)에 저장합니다. var 변수가 공식적으로 실행되기 전에는 정의되지 않은 값이 할당됩니다. 함수 function이 실행되기 전에는 전체 함수 블록이

한 줄씩 해석됩니다

expression=, +, -, *, /, + +,-,! , %....숫자(), 매개변수 모두 할당 가능

중복된 이름이 있으면 하나만 남게 됩니다. 변수와 함수의 이름은 priority보다 높습니다. 그리고 함수

함수만 남게 됩니다. (함수는 범위이고, 범위를 만나면 먼저 사전 구문 분석한 다음 한 줄씩 해석하는 과정에 따라 실행됩니다.) 로컬에서 찾을 수 없는 경우 아래에서 위로 찾아보세요(스코프 체인)

개념 오랫동안 이야기를 나눈 후에도 초보자는 아직 조금 헷갈릴 수 있으니 숙련된 운전자는 하차할 수 있습니다. 다음은 작은 밤 몇개를 주고 위의 이론과 결합하여 깊이 이해해 보도록 하겠습니다.

Practice

예제 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의 범위 및 사전 구문 분석에 대한 자세한 설명

개념:

한 줄씩 해석됩니다

Practice

관련 기사