본문 바로가기
웹(web)/프론트엔드-javascript

[Execution Context] Function call

by 바코94 2020. 6. 3.

함수를 호출한 직후 어떻게 내부적으로 메모리를 관리하는지 살펴보자. 이는 c언어에서의 function call이후 memory에 stack형태로 관리하는 것과 유사하다.

 

js프로그램이 시작되면 프로그램을 위한 공간이 생성된다. 이것이 Runtime Execution Context이고 이 공간은 스택 형태로 관리된다. 이 공간에 전역 코드를 위한 공간인 Global Context가 첫 스택으로 위치한다. 이후 함수를 호출할 때마다 해당 함수에 대한 Context가 스택 형태로 쌓였다가 호출이 끝나면 사라진다.

 

1. var a= 3;

2. function A(){

3. }

4. A();

5. ;

 

위 코드를 실행하면 어떻게 Runtime Exectuion Context가 이루어질까?

(Runtime Execution Context)

                            A Context

Global Context      Global Context        Global Context        

 

프로그램이 시작되면 Global Context가 스택에 가장 밑 부분에 위치한다. 3. 까지 Global Context만 존재하다가 4.에서 A가 호출되면 A Context가 스택에 추가된다.  A호출이 끝나면 A Context가 스택에서 사라지게 된다. 

 

이런 구조로 js가 돌아간다. 그렇다면 각각의 Context에는 어떤 내용들이 있을까? Context에는 Activation Object가 들어간다.  Activation Object에는 다음과 같은 것이 들어간다.

1. arguments

2. [[scope]]

3. local variable생성

4. this

 

1. arguments

함수 호출시 넘겨진 인자는 arguments object에 담겨 넘어온다. 이것이 Activation Object에 첫 번째 요소이다.

2. Scope chain에 대한 정보가 들어있다. linked list 형식으로 만들어진다. c에서는 블락 단위로 scope가 관리되는데 js에서는 함수 단위로 scope가 관리된다. 

3. parameter , local variable, local function의 변수가 생성된다. parameter에는 값이 할당된다. local variable, local function variable은 실행을 해야 값이 할당된다. 

4. this의 Object를 바인딩한다. apply나 call을 사용하지 않았다면 함수를 호출한 객체가 될 것이다.

 

 

'웹(web) > 프론트엔드-javascript' 카테고리의 다른 글

javascript 추가 기능  (0) 2020.06.27
[Closure]  (0) 2020.06.03
[Prototype] Prototype Chaining  (0) 2020.06.02
[Function] return value  (0) 2020.06.01
[Function]this, apply, call  (0) 2020.06.01