sungwony

[javascript] 클로저(closure) 본문

language/javascript

[javascript] 클로저(closure)

일상이상삼상 2017. 5. 19. 11:43

"이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수를 클로저라고 한다"


<textarea>

function outerFunc(){

/*자유 변수*/

var x = 1; 


return function(){

/*x와 arguments를 활용한 로직*/

}

}


var new_func = outerFunc();

/* outerFunc 실행 컨텍스트 종료 */

new_func();

</textarea>


*실행 컨텍스트 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념"

   "실행 가능한 자바스크립트 코드 블록이 실행되는 환경"


"현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면,

새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다."


1. 실행 컨텍스트 생성 과정

- 활성 객체 생성

실행 컨텍스트가 생성되면 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러 가지 정보를 담을 객체를 생성하는데, 이를 활성 객체라고 한다. 이 객체에 앞으로 사용하게 될 매개변수나 사용자가 정의한 변수 및 객체를 저장하고, 새로 만들어진 컨텍스트로 접근 가능하게 되어 있다.; 이는 엔진 내부에서 접근할 수 있다는 것이지 사용자가 접근할 수 있는 것은 아니다.


2. arguments 객체 생성


3. 스코프 정보 생성

- 현재 컨텍스트의 유효 범위를 나타내는 스코프 정보를 생성한다. 이 스코프 정보는 현재 실행 중인 실행 컨텍스트 안에서 연결 리스트와 유사한 방식으로 만들어진다. 현재 컨텍스트에서 특정 변수에 접근해야 할 경우, 이 리스트를 활요한다. 이 리스트로 현재 컨텍스트의 변수뿐 아니라, 상위 실행 컨텍스트의 변수도 접근이 가능하다. 이 리스트에서 차지 못한 변수는 결국 정의되지 않은 변수에 접근하는 것으로 판단하여 에러를 검출한다. 이 리스트를 스코프 체인이라고 하는데, [[scope]] 프로퍼티로 참조된다.


4. 변수 생성

5. this 바인딩

6. 코드 실행