실행컨텍스트
컨텍스트 = 문맥, 맥락
상위컨텍스트 = 상위 스코프 라고 생각.
식별자 - 변수명, 함수명, 클래스명 등
실행 가능한 코드는 4가지로 분류된다.
전역코드, 함수 코드, eval코드, 모듈 코드
= 자바스크립트엔진이 해야할일을 얘기함
전역 코드
var x 전역객체의 프로퍼티이자 전역스코프를 통해서 찾을 수 있어야한다.
=> window.x 나 x로도 접근이 가능해야한다
const y 전역스코프에 등록이 된다. (전역객체의 프로퍼티에 등록되는것이 아님)
=> window.y 안됨.
함수 코드
함수코드는 반드시 지역스코프를 생성해야되고, 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결되어야한다.
실행 가능한 코드의 평가와 실행
항상 코드를 평가하고 그 다음에 실행한다.
평가의 내용은 선언문들만(식별자와 관련된) 먼저뽑아서 먼저 실행한다. ( = 식별자들, 즉 선언문이 먼저 실행)
이것을 등록하기위해서 실행컨텍스트를 만든다.
실행컨텍스트 이후에 런타임이 시작
런타임이 시작되면, 변수에 값이 할당되고
예시)
var x = 10;
전역코드를 평가 (자바스크립트 엔진이)
식별자 x를 등록하라는 얘기네 전역 실행컨텍스트를 만든다. 그 안에다가 x라는 식별자를 등록한다.
전역 실행컨텍스트에 프로퍼티가 된다. x는 undefined가 들어감.
코드의 실행이 시작된다. (이것이 런타임)
이제 할당을 해주면됨, (식별자와 값을 바인딩하는것을 할당이라고함)
식별자를 찾으러가서 x라는 식별자가 없었다->reference error 이 예제는 x가 있으니까 10을 바인딩함.
예시2)
var x=10
function foo(a){
var x = 10 + a;
}
만약, 맨 윗줄에서 console.log(x)와 foo를 찍으면, undefined라는 값과 function
<실행컨텍스트>
x |
undefined |
foo |
function(함수객체) |
예시 3)
// 전역 변수 선언
const x = 1;
const y = 2;
// 함수 정의
function foo(a) {
// 지역 변수 선언
const x = 10;
const y = 20;
// 메소드 호출
console.log(a + x + y); // 130
}
// 함수 호출
foo(100);
// 메소드 호출
console.log(x + y); // 3
전역 실행컨텍스트 |
|
x |
<.......> |
y |
<.......> |
foo |
f(함수객체) |
전역코드가 실행단계가 되면
전역 실행컨텍스트 |
|
x |
1 |
y |
2 |
foo |
f(함수객체)를 가지고와서 호출한다(100을 인수로) |
foo(100)을만나면, 함수코드에 대한 평가를 시작한다. 전역코드를 실행을 중단하고
foo함수 실행컨텍스트 |
|
x |
<.......> |
y |
<.......> |
a |
undefined |
arguments |
|
평가가 끝나면, 함수코드를 실행
foo함수 실행컨텍스트 |
|
x |
10 |
y |
20 |
a |
100 |
arguments |
유사배열 |
일시중단되었던 전역코드의 실행을 다시 시작한다.
(중단되었던 시점을 기억하고있다가 다시 그지점으로 복귀 -> 실행컨텍스트 스택)
**함수 코드를 평가할때 arguments객체도 평가.
실행 컨텍스트(Execution Context)는 실행 가능한 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.
실행컨텍스트의 역할은 식별자를 관리, 식별자에 바인딩된 값을 지속적으로 관리, 스코프체인이 만들어짐.
this도 실행컨텍스트 내부에서 관리를 함.
실행 컨텍스트 스택
= 콜스택. / 코드의 실행 순서를 관리
스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트
전역 코드가 생성한 전역 실행 컨텍스트는 소멸하지 않고 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다.
'패스트캠퍼스 > 수업내용정리' 카테고리의 다른 글
2019-06-12 TypeScript (0) | 2019.06.12 |
---|---|
2019-06-11 Single Page Application & Routing (0) | 2019.06.11 |
2019-06-04 mongoDB, Sass (0) | 2019.06.04 |
2019-06-03 npm, babel, webpack (0) | 2019.06.03 |
2019-05-31 프로미스, (0) | 2019.05.31 |