혼잣말 많음 주의
실행 컨텍스트 : 실행 할 코드에 제공 할 환경 정보들을 모아 놓은 객체
실행 컨텍스트는 프로그램에서 어떤 문단이 실행될 상황마다 일어난다고 보면 될듯?!
문단이 실행되려면 실행되는 실행문에 대해서 정보를 셋팅 해 놓은 것이 실행 컨텍스트 인듯?
실행 컨텍스트가 활성화되는 시점에서 일어나는 일들
- Variable Environment
- Lexcial Environment
- ThisBinding
Variable Environment
현재 컨택스트를 만들면서 윗단 컨텍스트(외부 컨택스트)의 식별자 정보(recode)와 외부 환경 정보(outerEnvironmentReference )를 가진다.
Variable Environment 기반으로 다음 Lexcial Environment를 생성
Lexcial Environment
Variable Environment 기반으로 만들어졌으나 실시간으로 변경사항을 반영
현재 컨택스트에서 생긴 변수 함수들을 렉시컬 환경에 설정, 설정하면서 호이스팅도 이루어짐
ThisBinding this를 따로 설정해준게 아니라면 현재 컨택스트가 생성되는 구문 자체가 this일 것이다.
위를 쉽게 말하면 이렇게 볼 수 있을 것 같다.
- 외부 환경 정보
- 내부 환경 정보 구현( 속에 호이스팅도 포함 )
- this 셋팅
문단이 실행 되는 처음은 전역일 테니 프로그램이 실행되자마자 전역 컨텍스트가 구성 될 것이다.
var a = 1; // 전역 컨텍스트
function outerFunc () { // outer 컨텍스트
function innerFunc () { // inner 컨텍스트
console.log(a); // undefined
var a = 3;
console.log(a); // 3
}
innerFunc();
console.log(a); // 1
}
outerFunc();
console.log(a); // 1
컨텍스트로 순서대로 정리해보자면
[ 전역 컨텍스트 ] var a = 1; 선언 및 할당
[ 전역 컨텍스트 ] outerFunc() 실행
[ outerFunc 컨텍스트 ] innerFunc() 실행
[ innerFunc 컨텍스트 ] var a; 호이스팅 // 할당은 안된 상태
[ innerFunc 컨텍스트 ] a 출력 했으나 innerFunc에서는 a가 할당이 안되었네 undefined
[ innerFunc 컨텍스트 ] a = 3; 할당
[ innerFunc 컨텍스트 ] a 출력 할당했으니 3이겠지
[ innerFunc 컨텍스트 ] 종료
[ outerFunc 컨텍스트 ] a 출력 // 전역에서 할당된 a는 영향력이 있는 상태 // 1이 출력
[ outerFunc 컨텍스트 ] 종료
[ 전역 컨텍스트 ] a출력 1
[ 전역 컨텍스트 ] 끝
a 값에 대한 부연 설명
var a = 1; // 전역 컨텍스트
function outerFunc () { // outer 컨텍스트
function innerFunc () { // inner 컨텍스트
console.log(a); // 1
// var a = 3; // < -- 얘 때문에 innerFunc안에서의 a값이 할당된것으로 보면 됨
}
innerFunc();
console.log(a); // 1
}
outerFunc();
console.log(a); // 1
<-- 표시한 라인을 주석처리하고 실행해보면 a값은 모두 전역에서 할당된 값 1이 출력됨
또 알려주는 스코프...
Scope 스코프란 식별자에 대한 유효범위이다.
- Scope A의 외부에서 선언한 변수는, A의 외부/내부 모두 접근 가능하다.
- A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.
위의 Scope A를 innerFunc라고 대입해서 다시 읽어보면, 외부에 선언한 a가 유효 할 것이나, 내부(현재컨텍스트(innerFunc))에서 선언된 a는 내부(innerFunc)에서만 사용 될것.
그래서 innerFunc을 벗어난 outFunc에서는 외부의 a를 사용.
Scope chain
- 식별자의 유효범위를 안에서 바깥으로 차례로 검색해나는 것
- 이를 가능하게 하는 것이 outerEnvironmentReference이다. ( 외부 환경에 대한 참조 )
전역에서 outerFunc을 호출할때 outerFunc 컨택스트가 만들어지면서 전역의 Lexcial Environment가 outerFunc 컨택스트의 outerEnvironmentReference로 참조
outerFunc에서 innerFunc이 호출 될 때 컨택스트가 만들어지면서 outerFunction의 Lexcial Environment를 innerFunc 의 컨택스트 outerEnvironmentReference로 참조
'Language > javascript' 카테고리의 다른 글
| [JavaScript] callback function (1) | 2023.10.19 |
|---|---|
| [JavaScript] this, call, apply, bind (1) | 2023.10.17 |
| [JavaScript] 호이스팅 hoisting (0) | 2023.10.16 |
| [JavaScript] 얕은 복사(shallow copy)와 깊은 복사(deep copy) (0) | 2023.10.16 |
| [JavaScript] 데이터 타입 기본형과 참조형 (0) | 2023.10.15 |