웹(web)/프론트엔드-javascript

[Execution Context] Function call

바코94 2020. 6. 3. 15:29

함수를 호출한 직후 어떻게 내부적으로 메모리를 관리하는지 살펴보자. 이는 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을 사용하지 않았다면 함수를 호출한 객체가 될 것이다.