집 > 기사 > 웹 프론트엔드 > JS에서 코드 실행 순서를 조작하는 방법

JS에서 코드 실행 순서를 조작하는 방법

php中世界最好的语言원래의: 2018-04-16 11:10:017958검색

이번에는 JS에서 코드 실행 순서를 어떻게 연산하는지, 그리고 JS 연산 코드 실행 순서에 어떤 Notes가 있는지 알아보겠습니다.

1.js--->단일 스레드

엄밀히 말하면 javascript에는 다중 스레드라는 개념이 없습니다. 모든 프로그램은 단일 스레드에 의해 순차적으로 실행됩니다.

1. 싱글 스레드란?

더 간단히 말하면, 코드가 실행되는 동안 다른 코드가 실행되려면 현재 코드의 실행이 완료될 때까지 기다려야 합니다. 이를 설명하기 위해 코드를 하나 살펴보겠습니다

 for(var i=1;i<=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은 여전히 실행을 기다리는 스레드 풀에 배치됩니다. for 루프가 3번 완료되면 for 루프 실행이 완료된 후 이 시점에서 스레드는 유휴 상태입니다. 스레드 풀에서 실행을 대기 중인 setTimeOut이 실행되어 for 루프 실행이 완료된 후 i가 됩니다. 4이므로 3개의 4가 인쇄됩니다.

2. 위 상황을 변경하려면 다음 코드를 사용하면 됩니다

//将var变为let
for(let i=1; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1，2，3
  },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1，2，3
    },0);
  }(i)
}

2. 함수 범위 및 js의 코드 실행

>>>함수 범위

먼저 다음 개념을 이해해 봅시다:

　　1. js 언어에는 c 언어와 유사한 블록 수준 범위가 없습니다.

2. js 언어의 최상위 범위는 전역 범위라고 하는 window 객체의 범위 내에 있습니다. 전역 범위에 선언된 변수는 전역 변수입니다.

3. js 함수 범위 내의 변수는 함수 내부에서만 사용할 수 있으며 함수 외부에서는 사용할 수 없습니다.

　　4. JS 함수는 중첩될 수 있습니다. 여러 함수를 중첩하는 것은 범위의 레이어별 중첩을 구성합니다. 이를 JS에서는 범위 체인이라고 합니다.

5. JS 범위 체인 변수 액세스 규칙:

(1) 접근하려는 변수가 현재 스코프에 존재하는 경우 현재 스코프의 변수를 사용합니다.

(2) 접근하려는 변수가 현재 스코프에 존재하지 않는 경우 글로벌 스코프까지 상위 스코프에서 검색한다.

>>>실행 명령

JS 코드 실행은 두 부분으로 나뉩니다:

1. 코드 확인 및 로딩 단계(프리컴파일 단계) 변수와 함수를 선언하지만 변수에는 값이 할당되지 않습니다. 변수의 기본값은 정의되지 않습니다.

2. 코드의 실행 단계 이 단계에서는 변수에 값을 할당하고 함수를 선언합니다.

위의 특정 개념 중 일부를 살펴본 후 설명을 위한 코드를 살펴보겠습니다.

var a=1; //声明了一个全局变量
function func(){
  console.log(a); //输出：undefined。打印a，而在func这个作用域中已经声明了a变量，按照js的执行顺序，此时的a并未被赋值。
  var a=1;
  console.log(a); //输出：1。
}
func();

위의 코드를 보세요: 첫 번째 a는 정의되지 않은 것을 출력합니다. 이유: js 스코프 체인의 접근 규칙에 따라 접근하려는 변수 a가 현재 스코프에 존재하므로 현재 스코프의 변수를 사용합니다. js 코드의 실행 순서에 따라 이때 a 는 선언만 되고 할당되지는 않습니다. 기본값은 undefine 으로 출력됩니다.

그리고 두 번째 a는 1을 출력합니다. 이는 바로 이때 a가 선언되고 값이 할당되었기 때문에 a가 1을 출력하는 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!