프런트엔드 고급(2): 실행 컨텍스트 다이어그램

그림을 먼저 넣자

우리는 JS 학습 초기나 학습 중에 평가변수를 자주 접하게 됩니다. 인터뷰 개선에 대한 고민 질문. 예를 들어, 더 간단한 것부터 시작해 보겠습니다.

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

이 예는 일단 무시하고 JavaScript실행 컨텍스트에서 가장 기본적이면서도 가장 중요한 개념을 소개하겠습니다.

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

• 전역 환경: JavaScript 코드가 실행될 때 먼저 이 환경에 들어갑니다.

• 함수 환경: 함수가 호출될 때 , 실행될 때, 현재 함수에 들어가 코드를 실행합니다

• eval

따라서 JavaScript 프로그램에서는 여러 실행 컨텍스트는 생성되어야 합니다. 이전 기사에서 언급했듯이 JavaScript 엔진은 이를 스택 형태로 처리합니다. 이 스택을 함수 호출 스택(call 스택)이라고 합니다. 스택의 맨 아래는 항상 전역 컨텍스트이고, 스택의 맨 위는 현재 실행 중인 컨텍스트입니다.

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

var color = 'blue';

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

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

    swapColors();
}

changeColor();

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

1단계: 전역 컨텍스트를 스택에 푸시

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

2단계: ChangeColor의 실행 컨텍스트가 스택에 푸시됩니다.

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

3단계: swapColors의 실행 컨텍스트가 스택으로 푸시됩니다.

swapColors의 실행 코드에서는 다른 실행 컨텍스트가 발생하지 않습니다. .context이므로 이 코드는 성공적으로 실행되고 swapColors의 컨텍스트가 스택에서 팝됩니다.

4단계: swapColors의 실행 컨텍스트가 스택에서 나옵니다.

swapColors의 실행 컨텍스트가 나타난 후 실행 파일을 계속 실행합니다. ChangeColor 코드, 또한 다른 실행 컨텍스트가 발생하지 않으며 성공적으로 실행되면 팝업됩니다. 이런 식으로 ECStack에는 전역 컨텍스트만 있습니다.

5단계:changeColor의 실행 컨텍스트가 스택에서 팝됩니다.

브라우저 창이 스택에서 전역 컨텍스트가 팝됩니다. 닫은.

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

전체 프로세스

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

• 단일 스레드

• 동기 실행, 스택 맨 위에 있는 컨텍스트만 실행되고 다른 컨텍스트는 기다려야 함

• 브라우저를 닫을 때 팝업되는 전역 컨텍스트는 하나만 있습니다.

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

• 함수가 호출될 때마다 호출 함수 자체인 경우에도 새로운 실행 컨텍스트가 생성됩니다.

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

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

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

上例演变过程

如果你在某公众号看到我的文章，然后发现下面的评论说最后一个例子错了，请不要管他们，他们把函数调用栈和作用域链没有分清楚就跑出来质疑，真的很有问题。建议大家读一读这系列的第六篇文章，教你如何自己拥有判断对错的能力。

下一篇文章继续总结执行上下文的创建过程与变量对象，求持续关注与，谢谢大家。

위 내용은 프런트엔드 고급(2): 실행 컨텍스트 다이어그램의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!