Javascript의 실행 컨텍스트

안녕하세요!이 시리즈의 이 부분에서 우리는 자바스크립트가 내부에서 어떻게 일을 하는지, 그리고 상하문의 역할을 수행하는지 이해할 것이다.
JavaScript 코드의 실행 방식을 이해하면 코드를 쉽게 읽고 쓸 수 있습니다.
우리는 기본적인 핵심 개념을 깊이 이해합시다.

Everything in Javascript happens inside an Execution Context

그럼 Execution Context도대체 뭘까요?

컨텍스트 실행이란 무엇입니까?

실행 컨텍스트는 JavaScript 코드를 실행하는 환경으로 정의됩니다.
그것은 두 개의 구성 요소가 있는 큰 용기와 같다.

메모리 구성 요소: 모든 함수와 변수는 키 값이 맞는 곳으로 저장됩니다.메모리 구성 요소도 Variable environment라고도 합니다.

코드 구성 요소: 한 줄의 코드를 실행하는 곳입니다.이 코드 구성 요소도 Thread of execution라고도 부른다.

Javascript is a "synchronous single-threaded" language.

그러니 이 점을 하나하나 이해합시다.
단일 스레드는 JS가 한 번에 하나의 명령만 실행할 수 있음을 의미합니다.
동기화란 앞의 실행이 완료될 때만 JS가 다음 줄로 이동할 수 있음을 의미합니다.

JS 코드를 실행하면 어떻게 됩니까?

우리가 JS 코드를 실행할 때, JS 엔진의 화면 뒤에서 많은 일이 발생할 것이다.
우선, Execution Context 을 만들고 있습니다.
간단한 예를 들어 이 점을 이해합시다.

var n = 2;
function double(num){
    var ans = num * 2;
    return ans;
}
var double1 = double(n);
var double2 = double(4);

그래서 이 프로그램을 실행할 때 Global Execution Context 생성됩니다.
이 실행 컨텍스트는 다음 두 단계로 작성됩니다.

메모리 생성 단계

코드 실행 단계

메모리 생성 단계

이 단계에서 자바스크립트는 코드를 한 줄씩 읽고 모든 변수와 함수에 메모리를 분배합니다.
변수에 메모리를 분배할 때, 변수에 특수 값 undefined 을 저장합니다.
함수에 대해, 그것은 전체 함수체를 이 저장 공간에 저장한다.

코드 실행 단계

이 단계에서 자바스크립트는 코드를 한 줄 한 줄 실행하고 메모리 생성 단계에 저장된 함수와 변수의 값을 업데이트합니다.
첫 번째 행: var n = 2; 이후 전역 실행 컨텍스트는 다음과 같습니다.

두 번째 줄에서 다섯 번째 줄까지 실행할 것이 없어서 이 부분을 건너뛰었다.

At line 6: var double1 = double(n);

여기 함수 더블 () 을 호출합니다.

Whenever a new function is invoked, a new execution context is been created

따라서 함수double(n)에 대해 JS가 새 실행 컨텍스트를 작성했습니다.
1단계: 새로 작성된 실행 컨텍스트의 메모리 작성 단계는 다음과 같습니다.

단계 2: 새로 작성된 실행 컨텍스트의 코드 실행 단계는 다음과 같습니다.

이 단계에서 매개 변수num의 값은 함수에 전달된 매개 변수인 n(2와 같음)에 따라 업데이트됩니다.
다음에 표현식num * 2을 사용하여ans의 값을 업데이트합니다.

Whenever we encounter return statement:

모든 컨트롤을 호출 함수의 실행 상하문으로 되돌려줍니다.

이 함수 실례의 전체 실행 상하문이 삭제됩니다.

4행: return ans; 이후 현재 장면은 다음과 같습니다.

ans의

값은 변수 더블 1을 되돌려줍니다. 이 변수에서 이 함수를 호출합니다.

함수 더블 ()의 실행 상하문이 삭제되었습니다.

7행: var double2 = double(4); 이후 이와 같은 절차를 반복합니다.

마지막으로 전역 실행 컨텍스트는 다음과 같은 결과를 가져옵니다.

When Javascript completes the execution of the entire code, then the Global Execution Context is also deleted.

스택 호출

우리는 함수를 호출할 때마다 함수 실행 상하문을 만드는 것을 안다.
가장 간단한 자바스크립트 프로그램에도 함수 호출이 상당히 많기 때문에 모든 함수 실행 상하문은 어떤 방식으로 관리해야 한다.
대부분의 다른 함수는 호출될 것이다.
현재 실행 중인 함수를 추적하기 위해 창고를 사용했습니다. 현재 실행 중인 함수 실행 상하문은 창고의 맨 위에 있습니다.
실행이 완료되면, 실행이 완료되면, 실행이 비어 있을 때까지 다음 실행 상하문의 실행은 계속됩니다.
이 창고를 호출 창고라고 부른다.

Call stack maintains the order of execution of execution contexts.

이 호출 스택은 Javascript 프로그램을 실행할 때마다 채워집니다Global Execution Context.함수가 호출되거나 새 실행 상하문을 만들 때, 이 창고를 하나씩 채웁니다.
첫 번째 호출 스택은 컨텍스트 푸시를 전체적으로 수행하는 데 사용됩니다.

여섯 번째 줄까지: var double1 = double(n);
함수 더블 (n) 을 성공적으로 실행하면 컨트롤이 전역 실행 상하문으로 되돌아오고, 더블 (n) 의 실행 상하문이 창고에서 팝업됩니다.

이와 유사하게, 7줄: var double2 = double(4);에 대해 호출 창고는 '실행 상하문 for double (4)' 을 사용하여 전송합니다.

함수 더블 (4) 을 성공적으로 실행하면 컨트롤은 전역 실행 상하문을 되돌려주고, 창고에서 더블 (4) 의 실행 상하문을 꺼냅니다.
Javascript가 전체 코드를 실행할 때 전역 실행 상하문도 호출 창고에서 팝업됩니다.마지막으로, 호출 창고는 비어 있습니다.
드디어!!화면 뒤에 Javascript가 어떻게 작동하는지 학습합니다.

마무리

읽어주셔서 감사합니다!!나는 블로그에서 많은 돈을 써야 한다는 것을 안다.나는 그것이 어느 정도 도움이 되기를 바란다.특히 고맙다Akshay Saini.네트워크와 공유하십시오.아래에 너의 평론을 남기는 것을 잊지 마라.