JS 실행 환경 예제 소개

小云云원래의: 2018-03-07 10:37:491801검색

"실행 환경", 이 용어를 들으면 헷갈릴 수도 있어요! 그리고 많은 문헌에서는 '실행 컨텍스트'라고도 부르는데 사실은 같은 말이다. 책이나 자료에서는 이 부분을 매우 복잡하게 설명하는 경우가 많습니다. JS에서는 이해하기 어려운 부분입니다. 이 기사에서는 이 개념을 간단하고 쉬운 언어로 설명하려고 합니다.

1. 실행 환경 설명 예시

먼저 예시를 살펴보겠습니다.
브라우저 콘솔에 다음을 입력합니다.

var a=1;console.log(window.a);console.log(a);

결과는 1입니다. 당연히 a 변수는 window 개체의 속성입니다.
그렇다면 질문하겠습니다. 변수 a의 실행 환경은 무엇입니까?
당신이 대답하는 것은 어렵지 않다고 생각합니다. 그것은 창 개체입니다! 사실, 당신 말이 맞습니다. 창 개체는 변수 a의 실행 환경입니다. 가장 주변적인 실행 환경이기 때문에 전역 실행 환경이라고 합니다. 여기서 a는 기본적으로 전역 실행 환경에 정의되어 있으므로 a와 window.a는 동일합니다.
다음 예를 살펴보겠습니다.

function output(){
    var a=1;
    console.log(a);
}

이 예에서 a는 함수 내부에 정의되어 있으며 a의 실행 환경은 함수 실행 환경(출력)입니다.
창에

console.log(a);

를 입력하면 a는 함수 출력에만 표시되므로 오류가 보고됩니다.
하지만

console.log(output);

라고 입력하면 함수 출력의 실행 환경이 윈도우이기 때문에 정상적으로 함수가 출력되고, 물론 윈도우에서도 출력이 가능합니다!

2. 실행 환경은 어떻게 작동하나요?

우리는 출력 기능이 윈도우 환경에 있다는 것을 알고 있습니다. 프로그램이 출력 기능을 실행할 때 다음과 같이 추측했을 것입니다.
창 환경은 제어권을 출력 기능 환경에 넘겨주고 출력 환경은 홈 필드가 됩니다.
그럼, 실제로 그 뒤에서 무슨 일이 벌어지고 있는 걸까요?
JS에는 실행 환경 스택, 즉 실행 컨텍스트 스택이라는 것이 있습니다. 스택이 무엇인지 모른다면 데이터 구조를 채워야 합니다.
상자 더미처럼 전역 실행 환경은 실행 환경 스택의 맨 아래에 배치됩니다. 출력 함수로 실행 시 이 함수의 실행 환경도 박스에 패키징되어 전역 실행 환경 위에 '스택'됩니다. 아래쪽 상자에서 뭔가를 가져오는 것처럼 전역 환경에서 다른 기능을 계속 실행하려면 출력 기능을 먼저 실행해야 합니다. 비유적으로 말하면, 하단 박스를 옮기기 전에 상단 박스를 빼낸 것과 같습니다.

JS 실행 환경 예제 소개

1. 실행 환경 설명 예시

2. 실행 환경은 어떻게 작동하나요?

관련 기사