Inside JavaScript(5)

실행 컨텍스트와 클로저

실행 컨텍스트 개념

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

전역실행 컨텍스트가 가장 먼저 실행되고, 새로운 함수 호출이 발생하면 새로운 컨텍스트가 만들어지고 실행되며, 종료되면 반환된다. 이 과정이 반복된 후 전역 실행 컨텍스트의 실행이 완료되면 모든 시행이 끝난다.

console.log("This is global context");

function ExContext1(){
    console.log("This is ExContext1");
}

function ExContext2(){
    ExContext1()
    console.log("This is ExContext2");
}

ExContext2();

실행 컨텍스트 생성 과정

활성 객체 생성

활성객체 - 실행컨텍스트가 생성되면 자바스크립트 엔진에서 실행에 필요한 여러 가지 정보를 담을 객체를 생성, 이 객체를 얘기함.

arguments 객체 생성

위에성 생성된 활성 객체는 arguments 프로퍼티로 이 arguments 객체를 참조한다.

스코프 정보 생성

현재 컨텍스트의 유효 범위를 나타내는 스코프 정보를 생성한다. 현재 컨텍스트에서 특정 변수에 접근해야 할 경우, 이 리스트를 활용함

변수 생성

현재 실행 컨텍스트의 내부에서 사용되는 지역 변수의 생성이 이루어진다.

변수나 내부 함수를 메모리에 생성만 하고 초기화 하지 않은 상태

this 바인딩

this 키워드를 사용하는 값이 할당됨, 참조하는 객체가 없으면 전역 객체를 참조한다.

코드 실행

실행 컨텍스트가 생성되고, 변수 객체가 만들어진 후에 변수의 초기화 및 연산, 또 다른 함수 실행 등이 이루어짐

스코프 체인

C 언어의 경우 {, }으로 묶인 부분이 스코프가 됨

각 함수 객체는 scope 프로퍼티로 현재 컨텍스트의 스코프 체인을 참조한다. 현재 실행되는 함수 객체의 scope 프로퍼티를 복사하고 새롭게 생선된 변수객체를 해단 체임의 제일 앞에 추가한다.

스코프 체인 = 현재 실행 컨텍스트의 변수 객체 + 상위 컨텍스트의 스코프 체인

<script>

function HelloFunc(func){

    this.greeting = "hello";
}

HelloFunc.prototype.call = function(func){

    func ? func(this.greeting) : this.func(this.greeting);
}

var userFunc = function(greeting){
  console.log(greeting);  

}

var objHello = new HelloFunc();
objHello.func = userFunc;
objHello.call();
</script>

클로저

이미 생명주기가 끝난 외부 함수의 변수를 참조하는 함수

클로저는 성능적인 면과 자원적인 면에서 약간 손해를 볼수 있으므로 무차별적으로 사용해서는 안됨

클로저 활용 시 주의사항

• 클로저의 프로퍼티 값이 쓰기 가능하므로 그 값이 여러번 호출로 항상 변할 수 있음에 유의해야 한다.
• 하나의 클로저가 여러 함수 스코프 체인에 들어가 있는 경우도 있다.
• 루프 안에서 클로저를 활용 시 주의해야함