원문번역 Archives - just quit your job

Closure : 클로저 제대로 한번 뜯어보자!

2008년 4월 4일2014년 1월 12일 불꽃남자 1 Comment

이 부분을 번역할까 말까 한참을 고민했다.
대략 A4 한장 분량의 번역작업이 대충 2시간이 걸렸기 때문이다.
머이리 오래 걸려? 라고 묻는자에게 말하고 싶다.. 당신이 해봐~!! -_-

내가 알고 번역하는 것과,.. 모르고 번역한 것은 천지 차이다.
주위에 한글 번역서만 봐도 이건 금방 안다. 대부분이 아마도 원문을 보라고 권할 것이다.

나도 그렇다. 내가 모 취미반 공부반으로 번역은 하고 있지만, 원문을 꼭 다시 볼것을 권하는 바이다. 분명 이렇게 이야기 해도 안보는 사람들을 위해, 최대한 메끄럽게 번역할려고 노력중이다.
왜냐면, 나도 나름 영문꽈 학위 받은 남자기 때문에.. ㅋㅋㅋ
작년말에, 영한번역 수업을 들어놓은게 참 많이 도움이 되는거 같다..

여튼 각설하고,.. 시작해보자!!

원문 번역: http://www.jibbering.com/faq/faq_notes/closures.html
A4 용지로 출력하면, 15페이지중에 7번째 페이지가 되겠다!!

자동으로 일어나는 가비지 콜렉션

ECMA 스크립트는 자동으로 일어나는 가비지 콜렉션을 사용한다. ECMA 262 스펙 명세서에는 어떻게 가비지 콜렉션이 작동하는지에 대한 자세한 정의는 없지만, 일반적으로 “어떤 객체가 자신을 가르키는 참조자가 없을 경우에 그 객체는 가비지 콜렉터에 의해 가비지 콜렉션될수 있다.” 라는것이 일반적인 내용이다. 그러나 가비지 콜럭터에 의해 어느순간 콜렉션이 실제로 일어나는지 일어나지 않는지는 장담할수 없다.

(역주) 첫단락 해석이 이상해 의역을 많이 했다. 그리고 현재 ECMA 스펙을 확인중이다. 실제로 구현에 대한 아이디어가 있는지 없는지.. 확인 해봐야겠다..ㅋㅋㅋ

ECMA 스펙을 한창 보았다. 물론 처음부터 끝까지 보고 있는건 아니고, 필요한 부분만 참조해서 봤다. 그런데.. 오호라~ +_+_+_+ 스펙문서가 역시나 도움이 많이 됐다. 몰랐던 구현에 관한 아이디어가 너무나 많다. 물론 가비지 콜렉션에 대한 내용은 없었다. ㅋㅋㅋ

스펙문서를 보고, 처음에 이 문서 번역을 하면서 난해했던 부분이 상당부분 이해가 되고 있다 +_+_+ 이것도 차차 정리해둬야겠다.. 아~ 고수의 길은 멀고도 험하구낭..여튼 이어서~!!

클로져 만들기

클로져는 함수 객체가 리턴 되면서 형성되는데, 여기에는 2가지 조건이 있다.
먼저, 중첩된 함수가 다른 객체의 프로퍼티로 참조되거나 아니면, 전역변수나 전역적으로 접근 가능한 객체 혹은 외부 함수(중첩된 함수를 감싸는 함수)의 인자로써 넘겨지는 객체로 참조 되어질때, 클로져가 만들어진다. 아래 예제를 보자.

function exampleClosureForm(arg1, arg2){
var localVar = 8;
function exampleReturned(innerArg){
return ((arg1 + arg2)/(innerArg + localVar));
}
/* return a reference to the inner function defined as –
exampleReturned -:-
*/
return exampleReturned;
}

var globalVar = exampleClosureForm(2, 4);

위에 exampleClosureForm 실행문맥 안에서 생성된 함수 객체는 가비지 콜렉션 되지 않는다. 그 이유는 전역변수에 의해 참조 되고, 여전히 접근 가능하기 때문이다. 또한, globalVar(n) 과 같은 형식으로 호출되어 실행할수도 있다.

하지만 위에 경우는 새로 생성된 실행 문맥 안에서 만들어진 함수객체가 globalVar 변수에 의해 참조되고 있고, 그 함수 객체의 [[scope]] 프로퍼티가 스코프 체인의 Activation/Variable 객체를 가르키고 있기 때문에 약간 복잡한 경우에 해당한다. 즉, 새로 생성된 exampleClosureForm 실행 문맥의 스코프 체인의 Activation/Variable 객체 역시 가비지 콜렉션이 되지 않는다.

현재 클로져가 형성되었고,위에 중첩된 내부함수 객체는 자유로운 변수들( 역주: free variables가 무엇을 의미하는지 정확히 알수 없으나, 다른 일반 변수들 보다 제약이 적다는 의미로 해석된다. 그런데 왜 저럽게 free variables라고 표현했는지 아직은 모르겠다. )과 스코프 체인에 있는 Activation/Variable 객체를 가진다.

그 Activation/Variable 객체는 globalVar 변수에 의해 참조되는 함수 객체의 [[scope]] 프로퍼티에 의해 참조되어 묵여 있는 상황이다. 그래서 이 Activation/Variable 객체는 그것의 프로퍼티의 값들이 그대로 보존된 상태로 있다. 중첩된 함수를 호출하는 실행문맥 안에서의 스코프에 대한 해석은 식별자로 해석을 한다. 즉, Activation/Variable 객체의 프로퍼티들이 식별자가 된다는 의미다. 그리고 이것은 여전히 set 과 put 두 가지를 모두 수행할수 있고, 실행문맥이 끝나더라도 여전히 존재하게 된다. 왜냐?.. 클로져로 묵여있는 상황이기 때문이다.

위 예제에서 외부 함수(내부 함수를 감싸는)가 리턴될때, Activation/Variable 객체는 공식적인 파라메타 그리고 중첩 함수 정의와 지역 변수로써 대표되는 상태를 가지고 있다. 즉, Activation/Variable 객체의 arg1 프로퍼티는 값 2 를 가지고 있고, arg2 프로퍼티는 값 4를 그리고 localVar 변수는 값 8을 그리고 exampleReturned 프로퍼티는 중첩된 내부 함수 객체를 가르키는 참조자를 가지고 있다. (앞으로 요 Activation/Variable 객체를 편의상 “ActOuter1” 이라고 부를것이다.)

만약에 exampleClosureForm 함수가 아래처럼 다시 호출되면,

var secondGlobalVar = exampleClosureForm(12, 3);

새로운 Activation 객체를 가지는 실행문맥이 만들어지고, 새로운 함수 객체가 리턴된다. 그 리턴되는 함수 객체의 [[scope]] 프로퍼티는 바로 이 두번째 실행문맥 안의 Activation 객체를 참조한다. 여기서 이 Activation 객체의 arg1 프로퍼티는 12, arg2 는 프로퍼티는 3를 갖는다. ( 편의상 앞으로 요 Actiovation 객체를 “ActOuter2” 라고 부를 것이다. )

여기서 명확하게 두번째 클로져가 exampleClosureForm 의 두번째 실행문맥에 의해 형성되었다.

exampleClosureForm의 실행으로 각각 globalVar 전역변수와 secondGlobalVar 전역변수에 생성되어 할당된 두 함수 객체는 표현식 ((arg1 + arg2 ) / (innerArg + localVar)) 을 리턴한다. 여기서 클로져의 값과 그 사용은 4개의 식별자에 따라서 작동하고 이 식별자들은 각각 엄격하게 해석되어진다. (역주: 즉, 왜 그렇게 해석되는지.. 나름의 이치가 있다는 얘기구낭.. )

전역 변수인 globalVar 변수에 의해 참조되는 함수를 globalVar(2) 를 통해 실행한다고 생각해보자. 새로운 실행 문맥이 만들어지고, 또 하나의 Activation 객체(앞으로 이것을 “ActInner1” 이라고 부를 것이다.) 생성된다. 이 객체는 스코프 체인 맨앞에 삽입되고, 실행된 함수 객체의 [[scope]] 프로퍼티에 의해 참조된다. 이 ActInner1 은 innerArg 라는 이름의 프로퍼티가 주어지고, 공식적인 파라메타로써 그 argument 값 2가 할당된다. 이 새로운 실행 문맥의 스코프 체인은 ActInner1 -> ActOuter1 -> global object 순서가 된다.

스코프 체인은 표현식 ((arg1 + arg2 ) / (innerArg + localVar)) 의 값을 리턴받기 위해 식별자를 해석한다. 여기서 그 식별자들의 값은 스코프 체인에 있는 객체의 순서대로 객체의 프로퍼티들을 찾아서 해석하고 결정할 것이다.

스코프 체인에 있는 첫번째 객체는 ActInner1 이고, 이 객체는 값이 2인 innerArg 프로퍼티를 가지고 있다. 나머지 3개의 식별자들은 ActOuter1 객체의 프로퍼티에서 찾을수 있다.
즉, arg1 는 2, arg2는 4 그리고 localVar은 8 이다.
그래서 그 함수호출은 ((2+2) / (2+8)) 의 값을 리턴하게 될것이다.

이것을 두번째 전역변수인 secondGlobalVar 변수에 의해 참조되는 함수 secondGlobalVar(5)와 비교해 보자. 새로운 실행문맥 Activation 객체를 “ActInner2” 라고 하면, 이 실행문맥의 스코프 체인은 ActInner2 -> ActOuter2 -> global object 순서가 된다. ActInner2 객체는 값 5를 갖는 innerArg를 리턴하고, ActOuter2 객체는 arg1,arg2 그리고 localVar를 각각 12,3 그리고 8의 값으로 리턴을 하므로, 그 값은 ((12+3) / (5+8)) 이 될것이다.

secondGlobalVar 을 다시 호출하면, 새로운 Activation 객체가 새로 생성된 실행문맥안의 스코프 영역 맨 앞에 추가 될것이다. 하지만 ActOuter2 는 여전히 새로 생성된 실행문맥안에서도 유효하게 되어, Activation 객체 다음에 ActOuter2 객체가 오게 되고, 역시 arg1, arg2 그리고 localVar의 값을 ActOuter2 객체에서 리턴받게 될것이다.

이것이 바로 ECMAScript 에서 중첩 함수를 가지고, 유지하면서 공식적인 파라메타로써 접근 가능하고 선언된 내부 함수와 지역변수들이 어떻게 사용되는지를 보여주는것이다.
각각의 스코프 체인은 내부 중첩 함수가 생성된 실행 문맥 안에서 새로이 추가적인 Activation 객체를 생성하고 사용된다. ECMAScript 스펙에는 스코프 체인은 유한하다고 정의하고 있다. 하지만 그 스코프의 길이는 제약이 없다. 이것을 구현할때는 아마 약간의 실용적인 제약이 부과 되어있을텐데, 현재까지는 아무런 크고작은 문제들이 보고되지 않았다. 중첩함수를 품는 다는 것은 잠재적으로 그 의도를 가지고 있다고 봐야할 것이다. (역주 : 머 중첩함수를 함수로 가지지 말라는 의미같다. 중첩함수를 가진다면, 분명히 그 명확한 의도를 가지고 코딩을 해야한다는 의미??)

클로져를 가지고 무엇을 할수 있을까?

이상하게 들릴찌도 모르겠지만, 그 답은 어떤것도 그리고 무엇이든 할수 있다. 내가 예기하고자 하는건 클로져는 ECMAScript에서 어떤것을 모방하기 위해 허용했다는 것이다.
그래서 그 한계는 무엇을 만들고자 하는가에 따라 다르고, 구현도 마찬가지다. 약간 난해하긴 하지만 아마도 실질적으로 보다 나은 먼가를 해볼수 잇을것이다.

Example1 : setTimeout with Function References

클로져의 일반적인 사용은 함수를 실행하기에 앞서 그 함수를 실행하기 위한 파라메타로서 제공하는 것이다. 예로들면, 일반적인 웹 브라우져 환경에서 setTimeout 함수의 첫번째 인자로써 클로져를 제공할수 있다는 얘기다.

setTimeout 은 첫번째 인자로 넘어온 함수의 실행을 조절하고 두번째 인자로 넘어온 값을 milliseconds로 인식하고 interval 로 사용한다. 만약에 어떤 코드 조각을 setTimeout 에서 사용하기를 원한다. 이것은 setTimeout 함수를 호출하고, 첫번째 인자를 함수객체의 참조로 넘겨준다. 그리고 두번째 인자를 밀리세컨 인터벌로 사용한다. 하지만 함수 객체에 넘겨지는 참조자는 setTimeout 함수의 예정된 실행안에서는 파라메타를 제공할수 없다.

하지만, 코드는 또 다른 함수객체를 호출할수있다. 이 함수 객체는 내부에 중첩된 함수 객체를 참조하는 참조자를 리턴값으로 같는 함수객첵이다. 이 내부의 중첩된 함수 객체는 참조에 의해서 setTimeout 함수에 넘겨진다. 내부함수 실행에 사용되는 파라메타들은 함수 호출의 리턴값으로 넘겨받는다. setTimeout 은 넘겨받는 인자 없이 중첩된 내부함수를 수행하지만, 그 내부함수는 여전히 외부함수에게 호출의 리턴값으로 넘겨주는 파라메타들에 여전히 접근할수 있다.
(역주: 먼소린지… -_- )

function callLater(paramA, paramB, paramC){
/*
함수 표현식을 갖는 익명 내부 함수를 만들고 이것을 참조자로 리턴한다.
*/
return (function(){
/* 이 내부 함수는 setTimeout 과 함께 실행 되어진다.
그리고 이분이 실행되어 질때, 이것은 읽을수 있고, 수행되고,
파라메타들을 외부 함수에 넘겨준다.
*/
paramA[paramB] = paramC;
});
}

…
/*
함수를 호출한다. 이 함수는 실행문맥안에서 생성된 내부 함수 객체를 가르키는 참조자를 리턴해줄것이다. 넘겨준 파라메타들은 결과적으로 외부함수의 인자로 실행될때, 내부함수가 사용할것이다. 내부 함수객체를 가르키는 리턴된 참조자는 지역변수에 할당된다.
*/
var functRef = callLater(elStyle, “display”, “none”);
/*
setTimeout 함수를 호출하고, 첫번째 인자로 할당한 내부 함수를 참조자를 functRef 변수로 넘겨준다.
*/
hideMenu=setTimeout(functRef, 500);

Example 2: Associating Functions with Object Instance Methods (객체 인스턴스의 메소드를 갖는 연관 함수)

함수객체를 가르키는 참조자가 할당되어, 함수의 파라메타로 유용하게 사용되는 경우는 많다.
하지만 실행시간에 할당되기 전까지는 쓸수가 없다.

아래예제는 어떤 특별한 DOM 엘리먼트와의 상호 작용을 하기위해 설계된 자바스크립트 객체를 나타낸다. 이 객체는 doOnClick, doMouseOver, doMouseOut 메소드를 가지고 있고, 이런 메소드들을 DOM 엘리먼트에 상응하는 이벤트들이 발생한다. 하지만 수 많은 자바스크립트 객체 인스턴스들이 서로다른 DOM 엘리먼트로 부터 생성되고, 어떤 객체 인스턴스들은 어떻게 자신들이 코드안에서 쓰여질것인지 알수 없다. 즉, 어떤 전역객체가 어떤 인스턴스의 참조로 쓰일지 알수 없기 때문에 객체 인스턴스들이 어떻게 스스로가 전역적으로 참조가 되는지 알지못한다.

그래서 이 문제는 특정 자바스크립트 객체의 인스턴스를 가지는 이벤트 핸들링 함수를 실행함으로써, 어떤 객체의 메소드가 실행되었는지를 판별해 알아낸다.

아래 예제는 약간은 일반적인 클로져 기반의 함수를 사용한다. 이 함수는 엘리먼트 이벤트 핸들을 가지고 있는 객체 인스턴스를 포함한다. 정리하면, 이벤트 핸들러의 실행은 그 객체 인스턴스의 특정 메소드를 호출하고, 이때 이벤트 객체와 그 객체 메소드와 연관된 엘리먼트의 참조자를 인자로 넘겨주고, 그 메소드의 리턴값을 넘겨받는다.

<span class="commentJS"><blockquote><pre><span class="commentJS">/* <br>이벤트 핸들러와 연관된 객체 인스턴스의 일반적인 함수.<br><br>내부 함수는 이벤트 핸들러로써 사용되는 내부함수를 리턴 한다.<br>객체 인스턴스는 obj 파라메타를 넘겨받는다. 그리고 그 메소드 이름은 <br>객체가 methodName 파라메타를 넘겨줄때 호출된다.<br>*/</span>
function associateObjWithEvent(obj, methodName){
    <span class="commentJS">/* <br>     그 리턴된 내부 함수는 DOM 엘리먼트를 위한 이벤트 핸들러로 사용된다.
    */</span>
    return (function(e){
        <span class="commentJS">/* The event object that will have been parsed as the - e -
           parameter on DOM standard browsers is normalised to the IE
           event object if it has not been passed as an argument to the
           event handling inner function:-
        */</span>
        e = e||window.event;
        <span class="commentJS">/* The event handler calls a method of the object - obj - with
           the name held in the string - methodName - passing the now
           normalised event object and a reference to the element to
           which the event handler has been assigned using the - this -
           (which works because the inner function is executed as a
           method of that element because it has been assigned as an
           event handler):-
        */</span>
        return obj[methodName](e, this);
    });
}

<span class="commentJS">/* This constructor function creates objects that associates themselves
   with DOM elements whose IDs are passed to the constructor as a
   string. The object instances want to arrange than when the
   corresponding element triggers onclick, onmouseover and onmouseout
   events corresponding methods are called on their object instance.
*/</span>
function DhtmlObject(elementId){
    <span class="commentJS">/* A function is called that retrieves a reference to the DOM
       element (or null if it cannot be found) with the ID of the
       required element passed as its argument. The returned value
       is assigned to the local variable - el -:-
    */</span>
    var el = getElementWithId(elementId);
    <span class="commentJS">/* The value of - el - is internally type-converted to boolean for
       the - if - statement so that if it refers to an object the
       result will be true, and if it is null the result false. So that
       the following block is only executed if the - el - variable
       refers to a DOM element:-
    */</span>
    if(el){
        <span class="commentJS">/* To assign a function as the element's event handler this
           object calls the - associateObjWithEvent - function
           specifying itself (with the - this - keyword) as the object
           on which a method is to be called and providing the name of
           the method that is to be called. The - associateObjWithEvent
           - function will return a reference to an inner function that
           is assigned to the event handler of the DOM element. That
           inner function will call the required method on the
           javascript object when it is executed in response to
           events:-
        */</span>
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
        ...
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... <span class="commentJS">// doOnClick method body</span>.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... <span class="commentJS">// doMouseOver method body.</span>
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... <span class="commentJS">// doMouseOut method body.</span>
}

그래서 이 DhtmlObject의 인스턴스는 내부적으로 어떻게 다른 코드에 의해 쓰이고, 전역 네임스페이스와 다른 DHtmlObject 인스턴스와의 충돌 신경쓰지 않고도, 스스로 DOM 엘리먼트를 연관시킬수 있다.

Example 3: Encapsulating Related Functionality

클로져는 서로 의존적이거나 밀접한 관계가 있는 코드를 묶고 우연히 발행하는 상호작용의 위험들을 최소화하는 방법으로 추가적인 스코프를 만들수 있다.

(역주: 아~ 길다… 이번 예제는 그냥 읽어보고, 내가 이해한다로 그냥 쓰겠음..)

Scope chains 과 scope 프로퍼티 제대로 이해하기!!

2008년 4월 2일2014년 1월 12일 불꽃남자 5 Comments

아래 포스팅과 이어서 이번에는 Scope chains 과 [[scope]] 프로퍼티에 대해서 제대로 한번 알아보자.

원문 출처: http://www.jibbering.com/faq/faq_notes/closures.html

함수 호출을 위한 실행 문맥과 스코프 체인은 함수 객체의 [[scope]] 프로퍼티에 정의된 실행 문맥의 Activation/Variable 객체를 스코프의 맨 앞쪽에 더함으로써 생성되어진다. 그래서, 내부적으로 [[scope]] 프로퍼티가 어떻게 정의되는지 이해하는 것은 매우 중요하다.

ECMAScrpt 에서 함수(function)은 객체다. 그리고 이런 객체들은 변수 인스턴스화 과정을 거치면서 함수 선언에 의해 만들어지거나, 함수표현식을 평가할때, 혹은 함수 생성자에 의해서 invoking 을 수행할때 만들어진다.

Function 생성자와 함께 생성되는 함수(Function) 객체는 항상 전역객체를 포함하고 있는 스코프 체인(scope chain)을 가르키는 [[scope]] 프로퍼티를 가진다.

함수 선언식이나 표현식과 함께 생성되는 함수 객체는 그 실행 문맥안에서 스코프 체인을 가진다. 그리고 이런 함수 객체들은 그 실행문맥 안에서 내부적인 [[scope]] 프로퍼티를 생성하고 할당한다.

쉬운 예로 아래와 같은 전역 함수 선언식을 보자( 표현식 아님!! 표현식은 그 다음 예제..)

function exampleFunction(formalParameter) {
…. // function body code
}

위 함수는 전역 실행 문맥안에서 변수 인스턴스화 과정을 통해 함수 객체로 생성된다.
전역 실행 문맥은 오직 전역 객체만을 가지는 스코프 체인을 가진다. 그래서 이 함수는 “exampleFunction” 이라는 이름을 가지는 전역 객체의 프로퍼티로 생성되어 지고, 내부적으로 [[scope]] 프로퍼티가 할당되어 진다. 이 [[scope]]프로퍼티는 오직 전역 객체만을 포함하고 있는 스코프 체인을 가르키게 된다.

함수 표현식이 전역 실행 문맥 안에서 수행될때, 비슷한 스코프 체인이 할당되어진다.
다음 예제를 보자.

var exampleFuncRef = function() {
… // function body code
}

위와 같은 경우를 제외하고 전역 객체의 이름있는 프로퍼티들은 전역 실행 문맥에서 변수 인스턴스화 과정을 거치면서 생성되어 진다. 하지만 위 예제의 함수 객체는 인스턴스화 과정에서 생성되는것이 아니라 변수에 할당된 함수 표현식이 평가 될때 생성된다. 그러므로 인스턴스화 과정을 거칠때 위 예제의 함수는 전역 객체에 의해 참조 되지 않는다.

하지만 함수 객체의 생성은 여전히 전역 실행 문맥안에서 수행 되기때문에 이 생성된 함수 객체의 [[scope]] 프로퍼티는 할당된 스코프 체인 안에서 여전히 전역 객체만을 포함하게 된다.

내부 함수(중첩된 함수) 선언식이나 표현식은 한 함수의 실행문맥 안에서 함수 객체가 생성되어 지는 결과를 가져온다. 그래서 보다 복잡한 스코프 체인이 되어버린다.
아래 코드를 보자.

function exampleOuterFunction (formalParameter) {
   function exampleInnerFunctionDec() {
… // inner function body
   }
   …. // the rest of the outer function body.
}
exampleOuterFunction(5);

밖에 선언된 함수의 객체는 전역 실행 문맥의 변수 인스턴스화 과정에서 만들어지기 때문에 그 함수(exampleOuterFunction) 객체의[[scope]] 프로퍼티는 전역객체만을 가지는 스코프체인을 가르키게 된다.

전역코드가 exampleOuterFunction(5); 이 구문을 수행할때, exampleOuterFunction 함수가 호출되고 이것은 이 함수를 위한 새로운 함수 실행 문맥을 만들어주게 된다. 그리고 앞서서 설명했던것처럼, Activation 과 Variable 객체가 그 실행 문맥 안에 만들어지게 된다.

이때 새로운 실행문맥의 스코프는 새로운 Activation 객체를 포함하는 체인을 구성하게 된다. 그리고 이 체인은 Activation 객체에 이어서 호출된 본래 함수 즉, exampleOuterFunction 객체의 [[scope]] 프로퍼티를 참조하게 되기때문에, Activation객체에서 exampleOuterFunction 객체 [[scope]] 프로퍼티가 가르키는 전역 객체 까지 체인을 형성하게 되는 것이다.

새로운 실행 문맥의 변수 인스턴스화 과정을 거치게 되면서 exampleInnerFunctionDec 함수 객체가 생성이 되고, exampleInnerFunctionDec 함수 객체의 [[scope]]프로퍼티는 현재의 실행 문맥 안에서 생성된 scope를 할당받는다.
즉, exampleInnerFunctionDec 함수 객체의 [[scope]]는 현재 실행 문맥의 Activation 객체와 전역객체인 window 객체까지 체인을 형성할수 있게 된다.

지금까지 소스코드와 구조에 따라서 자동적으로 컨트롤 되는 모습을 보았다. 실행 문맥의 스코프 체인은 새로운 실행문맥에서 함수 객체의 [[scope]] 프로퍼티가 생성되고, 본래 함수 객체의 [[scope]] 프로퍼티들이 가르키는 실행 문맥의 스코프안의 객체까지 연결될수 있음을 나타낸다. 하지만 ECMAScipt 는 with문을 통해서 스코프 체인을 수정할수 있다.

with 문이 표현식을 평가했을때, 만약에 그 표현식이 객체라면, 그 객체는 현재 실행문맥의 스코프 체인안에 추가된다.(추가되는 객체는 현재 스코프 체인의 맨 앞에 있는 Activation 객체 앞에 추가가 된다.) 그리고 with 문 다음의 문장들을 수행하고, 완료한뒤에 본래의 스코프 체인을 복구한다. (아~ — 스코프 체인안에 객체에 추가하고 복구하는 과정때문에 속도가 느려지는군…–_)

with문은 변수 인스턴스화 과정중에 함수의 객체가 생성되기 때문에 함수 선언식에는 영향을 주지 않는다. 하지만 함수 표현식은 with 문에 의해서 평가 되어 질수 있다.

/* 전역 변수 y를 만들고 그것이 하나의 객체를 참조한다. */
var y = {x:5}; // x 프로퍼티를 가지는 객체 리터럴
function exampleFuncWith(){
var z;
/* 전역 변수에 의해 참조 되는 객체를 y에 추가하고 그것을 스코프 체인 앞에 둔다. */
with(y){
/* 함수 객체를 생성하기 위해 함수식을 평가하고, 지역 변수 z를 함수 객체의 참조로 할당한다.
*/
z = function(){
… // inner function expression body;
}
}
…
}
/* execute the – exampleFuncWith – function:- */
exampleFuncWith();

exampleFuncWith 함수가 호출되어 질때, 그 결과의 실행 문맥은 그 실행문맥 안의 Activation 객체에서 전역 변수까지 참조하는 스코프 체인을 가진다. 그리고 with문을 수행할때 전역 변수 y가 참조하는 객체를 이 스코프 체인 맨 앞에 추가한다.
즉, y객체 –> Activation 객체 –> window 객체 순으로 체인이 생긴다.

함수 표현식(z=function(){})의 의해 평가되서 생성된 함수 객체(z)의 [[scope]] 프로퍼티는 현재의 스코프를 가르키게 된다. 즉, y객체를 포함하고, 뒤이어 Activation 객체 그리고 외부함수 실행문맥이 가지는 스코프 영역의 전역객체 즉, window 객체까지 체인을 이루게 된다.

with 문 블락이 종료되면, 현재의 실행 문맥은 복구되지만,( 스코프 맨 앞에 있던 y 객체가 지워진다.) 이미 생성된 함수 객체(z)의 [[scope]] 프로퍼티는 여전히 y 객체를 가지는 스코프 체인을 가지고 있는다.

The Execution Context : 실행문맥 제대로 이해하기

2008년 4월 2일2014년 1월 12일 불꽃남자 Leave a comment

원문 출처 : http://www.jibbering.com/faq/faq_notes/closures.html

평소에 일반적인 C,C++,Java,C# 이딴 언어를 주로 사용하다 자바스크립트와 같은 스크립트 언어를 조금만 하다보면, 금방 궁금증이 늘어난다.

과연.. 요놈들은 왜? 이렇게 작동하는걸까? 라는 좀 원초적인 질문이다.

어제 오늘 클로저라는 놈을 제대로 이해하기위해, 각종 아티클들을 찾아보다가..
괜찮은 아티클을 발견하고, 지금 번역은 아니고.. 그냥 해석해서 이해하는 중이다.
사실 클로저라는 놈을 이해하기위해선, 자바스크립트 내부적으로 작동하는 매커니즘을 이해할 필요가 있다..

이름하야, Indentifier Resolution, Execution Contexts, Scope Chains, Property Chain 같은 용어와 내부 매커니즘을 이해해야 한다는 얘기다.

오늘은 그중에서 실행문맥(Execution Contexts)에 대해서 정리해보자.

위에 원문을 A4로 출력하면, 대략 4페이지에 나오는 내용이다.

실행문맥은 ECMAScript 스펙에서 정의 된대로 추상적인 개념이고, 요 스팩을 구현하기 위해서 요구되는 지침정도라고 생각해보면 되겠다. 하지만 스펙에는 어떻게 구현하라는 이야기는 없으므로, 대충 개념만이라도 이해하자.

모든 자바스크립트 코드의 실행은 실행문맥안에서 이루어 진다. 전역 코드가 실행될때는 전역실행문맥이라고 불리는 곳에서 실행된다. 그리고 그 전역실행 문맥 안에 존재하는 각각의 function 들은 그 펑션마다 고유의 실행 문맥이 만들어지고 그 안에서 실행이 된다. eval 펑션은 예외다.

자바스크립트 펑션이 호출되면, 실행문맥안으로 들어가고 그안에서 새로운 펑션이 호출되면, 새로운 실행문맥을 만들고, 그 실행문맥 안으로 들어간다. 그리고 값이 리턴되면, 본래 호출되었던 펑션으로 복귀를 하게 되고, 이값도 리턴이 되면, 실행문맥은 사라진다.
결국 실행문맥이라는 것은 우리가 흔히 메모리 구조를 그릴때 그리는 스택구조와 비슷하다고 보면 되겠다.

일반 실행 문맥
실행문맥이 생성될때, 많은 일들이 순차적으로 일어난다.

1. Activation 객체 생성
먼저, 펑션의 실행문맥안에서 특별한 매커니즘을 갖는 Activation 이라는 객체를 만든다. 이 Activation 객체는 결과적으로 이름이 있는 프로퍼티에 접근할수 있으므로, 일반적인 객체라고 봐도 무방하다. 하지만, 일반 객체들이 모두 가지고 있는 프로토타입(prototype)을 가지고 있지 않고, 자바스크립트 코드에 의해서 직접적으로 참조되지 않는다.

2. arguments 객체 생성
다음으로 배열과 비슷하게 index를 가지는 Arguments 객체를 생성한다. 이 객체는 length(호출자가 넘겨주는 인자의 갯수)와 callee(실행중인 함수 객체-재귀를 위해 필요하다) 프로퍼티도 갖는다.
그리고 앞서 만든 Activation 객체에 “arguments”라는 이름의 프로퍼티가 만들어지고, 이 arguments객체를 참조할수 있도록 할당(assign)된다.

3. scope 할당
다음으로, 실행문맥은 Scope를 할당(assign)한다. 스코프는 객체들의 리스트로 구성된다. 흔히들 스코프 체인이라고 이야기한다. 한편 각 펑션 객체는 내부적인 [[scope]] 프로퍼티를 갖고 있는데, 그 [[scope]] 프로퍼티 역시 객체들의 리스트로 구성된다.
실행문맥에 할당된 스코프는 맨 앞에 Actiovation객체를 넣고, 호출된 본 함수 객체의 [[scope]] 프로퍼티가 참조하는 리스트들을 함께 구성한다.

4. 변수 인스턴스화 과정수행
다음으로, ECMA 262에서 “Variable” 객체로 언급한 객체들을 사용해서 변수의 인스턴스화(“variable instantiation”) 과정이 일어난다. Activation 객체 또한 Variable 객체로써 사용된다. (결국 Activation 객체와 Variable 객체는 사실상 같은 객체다. 아주 중요하니 체크하기 바람!!)

함수 표현식에서 선언된 공식적인 파라메타들을 식별자로 Activation 객체의 프로퍼티로 생성하고, 호출자로 부터 넘어온 인자값은 그 프로퍼티들의 값으로 한다. 인자가 넘어오지 않은 프로퍼티는 그 값으로는 undefined 할당이 된다.

함수 선언에서 사용된 함수 이름은 그 이름으로 함수 객체를 만들고 Variable 객체(이름은 다르게 표현하지만 결국 Activation 객체를 말한다)의 프로퍼티로 생성한다.변수 인스턴스화의 마지막 과정은 함수 안에서 지역변수로 선언된 모든 변수들을 Variable 객체의 프로퍼티로 생성하면서 마무리 짓는다.

변수 인스턴스화 과정에서 지역 변수로 생성된 프로퍼티들은 모두 undefined 값으로 초기화된다. 실질적인 값 초기화 과정은 함수 내부 코드가 실행될때 비로서 값이 정해진다는것을 잊지말자!

arguments 프로퍼티를 가지는 Activation 객체와 지역 변수로 쓰이는 정해진 이름의 프로퍼티들을 가지는 Valiable 객체는 결국 서로 같은 객체다. 그리고 식별자 arguments 가 마치 지역변수로써 쓰일수 있도록 허가되어진다.

5. this 키워드 값 할당
마지막으로 this 키워드 값이 할당된다. 만일 this가 어떤 객체를 참조하도록 할당이 되면, 프로퍼티 접근 연산자를 통해서 그 this 키워드가 가르키는 객체의 프로퍼티들을 참조 한다.
즉, this.(프로퍼티 이름) 이딴 식으로 참조할수 있게 되고, this 에 null 값이 할당되면, 이 this 키워드는 전역 객체(window)를 참조하게 될것이다.

전역 실행 문맥

전역 실행 문맥은 arguments 가 없기 때문에 정의된 Activation 객체를 가질필요가 없다는 것이 약간 다르다. 하지만 스코프는 필요로 한다. 전역 실행 문맥의 스코프 체인은 오직 전역 객체 하나만을 가르킨다.

역주) 코드에서 선언된 전역변수는 모두 이 전역객체의 프로퍼티로 들어가기 때문에 사실상 전역객체 하나만 가지고 있는 꼴이 된다.

일반적인 최상위 레벨의 함수 선언들은 전역 실행 문맥의 내부 함수 들로써, 변수 인스턴화 과정을 거친다. 즉, 이 변수 인스턴화 과정을 거치게 되므로, 결론적으로 이 함수들은 전역 객체의 프로퍼티로써 존재하게 된다. 그리고 마지막으로 전역객체는 this 객체를 통해서 참조 될수 있다.

휴..-_- 그냥 원문 읽는거랑 번역해서 쓰는거랑 차이가 심하군..2시간이나 걸렸넹..ㅜㅜ..