이번에는 JS에서 코드 실행 순서를 어떻게 연산하는지, JS 연산 코드 실행 순서에 있어서 주의 사항은 무엇인지 알아보겠습니다.
1. js---gt; 단일 스레드
?엄밀히 말하면 JavaScript에는 멀티스레딩이라는 개념이 없으며 모든 프로그램이 단일 스레드에 의해 순차적으로 실행됩니다. .
?1. 싱글 스레드란 무엇입니까?
?일반인의 관점에서 보면, 코드가 실행되는 동안 다른 코드 조각이 실행되려면 현재 코드가 실행될 때까지 기다려야 합니다. 이를 설명하기 위해 코드를 살펴보겠습니다.
for(var i=1;ilt;=3;i){
setTimeout(function(){
console.log(i); //출력: 4, 4, 4
}, 0)
}
위의 코드 부분에서는 지연 시간을 0으로 설정했기 때문에 루프를 한 번 실행하고 i를 즉시 인쇄해야 하는데 최종 인쇄 결과는 4, 4, 4입니다. 위와 같은 결과가 나타나는 이유는 바로 js 코드가 단일 스레드 애플리케이션이기 때문입니다.
?실행 프로세스 중에 for 루프가 먼저 발생하고 for 루프가 스레드에 먼저 들어갑니다. i=1일 때 루프가 setTimeOut에 도달한 후 for 루프는 아직 실행이 완료되지 않았으며 setTimeOut은 실행을 기다리는 장소(스레드 풀)에 배치됩니다. 이때 for 루프는 계속 실행됩니다. i=2이면 for 루프의 실행이 아직 완료되지 않은 것입니다. 이때 setTimeOut은 여전히 실행을 기다리는 스레드 풀에 배치됩니다. 3회 완료되면 for 루프가 실행됩니다. 이때 스레드는 유휴 상태입니다. 스레드 풀에서 실행을 기다리고 있는 setTimeOut이 차례로 실행되어 for 루프 실행이 완료되면 i가 4가 됩니다. 3개의 4가 인쇄됩니다.
?2. 위 상황을 변경하려면 다음 코드를 사용하세요.
//Change var to let
for(let i= 1; ilt ;=3; i ){
setTimeOut(function(){
console.log(i); //출력 결과는 1, 2, 3입니다. p>< p> }, 0);
}
//자체 실행 함수로 래핑
for(var i=1; ilt;= 3; i ){
!function(i){
setTimeOut(function(){
console.log(i); //출력 결과 1, 2, 3입니다.
}, 0)
}(i)
}
2. 함수 범위 및 합계 js 코드 실행
?gt; gt; 함수 범위
먼저 다음 개념을 이해해 보겠습니다.
?1. C 언어와 유사한 블록 수준 범위가 아닙니다.
?2. js 언어의 최상위 범위는 전역 범위라고 하는 창 개체의 범위 내에 있습니다.
?3. js 함수 범위 내의 변수는 함수 내부에서만 사용할 수 있으며 함수 외부에서는 사용할 수 없습니다.
?4. JS 함수는 중첩될 수 있습니다. 여러 함수의 중첩은 범위의 레이어별 중첩을 구성합니다. 이를 JS에서는 범위 체인이라고 합니다.
5. JS 스코프 체인 변수 접근 규칙:
(1) 접근하려는 변수가 현재 스코프에 존재하는 경우 현재 스코프의 변수를 사용합니다.
(2) 접근하려는 변수가 현재 범위에 존재하지 않는 경우 전역 범위까지 상위 범위에서 검색됩니다.
?gt; 컴파일 단계) 이 단계에서는 변수와 함수가 선언되지만 변수에는 값이 할당되지 않으며 변수의 기본값은 정의되지 않습니다.
?2. 코드의 실행 단계 이 단계에서는 변수에 값을 할당하고 함수를 선언합니다.
위의 특정 개념 중 일부를 살펴본 후 설명을 위한 코드를 살펴보겠습니다.
var a=1 //전역 변수 선언
function func(){
console.log(a); //출력: 정의되지 않음. a를 인쇄하고, js의 실행 순서에 따라 a 변수는 현재로서는 할당되지 않았습니다.
var a=1;
console.log(a); //출력: 1.
}
func();
?위의 코드를 보세요: 첫 번째 a는 정의되지 않은 것을 출력합니다. 이유: js 스코프 체인의 접근 규칙에 따라 접근하려는 변수 a가 현재 스코프에 존재하므로 현재 스코프의 변수를 사용합니다. js 코드의 실행 순서에 따라 이때 a 는 선언만 되고 할당되지는 않습니다. 기본값은 undefine 으로 출력됩니다. 두 번째 a는 1을 출력합니다. 이는 정확하게 a가 이때 선언되고 값이 할당되었기 때문에 a가 1을 출력합니다.
이 기사의 사례를 읽으신 후 방법을 익히셨으리라 생각합니다. 더 흥미로운 정보는 Gxl.com의 다른 관련 기사에도 주목해 주세요!
추천 자료:
vue.js를 사용하여 라이브러리 관리 플랫폼을 구축하기 위한 기술적 솔루션
vue.js의 일반적인 지침 요약
JS 버튼 사용 비활성화 및 활성화에 대한 자세한 설명