고급 프런트엔드 기본 사항(2): 실행 컨텍스트에 대한 자세한 설명

JS를 배우는 초기나 면접에서 평가변수 개선에 대한 질문을 자주 접하게 됩니다. 예를 들어, 더 간단한 것부터 시작해 보겠습니다.

console.log(a);   // 这里会打印出什么？
var a = 20;

이 예제는 일단 무시하고 JavaScript에서 가장 기본적이면서 가장 중요한 개념인 실행 컨텍스트(Execution Context)를 먼저 소개하겠습니다.

컨트롤러가 실행 가능한 코드로 전환될 때마다 실행 컨텍스트로 들어갑니다. 실행 컨텍스트는 범위를 형성하는 현재 코드의 실행 환경으로 이해될 수 있습니다. JavaScript의 실행 환경에는 대략 세 가지 상황이 포함됩니다.

1. 전역 환경: JavaScript 코드는 실행 시 먼저 이 환경에 들어갑니다.

2. 함수 환경: 함수가 호출되어 실행될 때 현재 함수에 들어가 코드를 실행합니다. 🎜>

3.eval

따라서 JavaScript 프로그램에서는 여러 실행 컨텍스트를 생성해야 합니다. 이전 기사에서 언급했듯이 JavaScript 엔진은 이를 스택 방식으로 처리합니다. 스택의 맨 아래는 항상 전역 컨텍스트이고, 스택의 맨 위는 현재 실행 중인 컨텍스트입니다.

코드 실행 중 위의 세 가지 상황이 발생하면 실행 컨텍스트가 생성되어 스택에 배치됩니다. 스택 상단의 컨텍스트가 실행된 후 자동으로 스택에서 튀어나옵니다. 이 과정을 보다 명확하게 이해하기 위해 다음 예시와 다이어그램을 바탕으로 보여드리겠습니다.

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

ECStock을 사용하여 실행 컨텍스트 그룹을 처리하는 스택을 나타냅니다. 첫 번째 단계는 전역 컨텍스트를 스택에 푸시하는 것임을 쉽게 알 수 있습니다.

전역 컨텍스트가 스택에 푸시된 후, 그 안에 있는 실행 코드는 ChangeColor()를 만날 때까지 실행을 시작합니다. 이 문장은 자체 생성을 위해 ChangeColor 함수를 활성화합니다. 실행 컨텍스트이므로 첫 번째 두 번째 단계는 ChangeColor의 실행 컨텍스트를 스택에 푸시하는 것입니다.

changeColor의 컨텍스트가 스택에 푸시된 후 컨트롤러는 그 안에 있는 실행 코드를 실행하기 시작하고 swapColors()를 만난 후 실행 컨텍스트를 활성화합니다. 따라서 세 번째 단계는 swapColors의 실행 컨텍스트를 스택에 푸시하는 것입니다.

swapColors의 실행 코드에는 실행 컨텍스트를 생성할 수 있는 다른 상황이 없으므로 이 코드는 성공적으로 실행되고 swapColors의 컨텍스트가 스택에서 팝됩니다. .

swapColors의 실행 컨텍스트가 팝업된 후,changeColor의 실행 코드가 계속 실행되고, 성공적인 실행 후에는 다른 실행 컨텍스트가 팝업되지 않습니다. 이런 식으로 ECStack에는 전역 컨텍스트만 있습니다.

브라우저 창이 닫힌 후 전역 컨텍스트가 팝업됩니다.

참고: 함수에서 return을 만나면 실행 코드의 실행이 직접 종료될 수 있으므로 현재 컨텍스트가 스택에서 직접 팝됩니다.

이 프로세스를 자세히 이해한 후에는 실행 컨텍스트에 대한 몇 가지 결론을 요약할 수 있습니다.

1. 단일 스레드

2. 동기 실행, 스택 상단의 컨텍스트만 실행되고 다른 컨텍스트는 대기해야 합니다

3. 전역 컨텍스트, 브라우저가 닫힐 때 스택을 팝합니다

4. 함수의 실행 컨텍스트 수에는 제한이 없습니다

5. 자체적으로 호출되는 함수인 경우에도 생성에 대한 새로운 실행 컨텍스트가 됩니다.

실행 컨텍스트에 대한 이해를 강화하기 위해 예제의 진화를 그려보겠습니다. 이는 간단한 클로저 예제입니다.

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999

f1의 실행 코드에서 f2 함수가 호출 및 실행되지 않기 때문에 f1이 실행될 때 f2는 새 컨텍스트를 생성하지 않으며 결과가 새로 실행될 때까지 생성되지 않습니다. 구체적인 진화 과정은 다음과 같다.