test

분류없음 2013.03.04 12:42

trsdfsdfsdf

sdfsdfsdf

저작자 표시 비영리 변경 금지
신고

The Call Object

making web/javascript 2011.06.12 17:41

원문: http://rx4ajax-jscore.com/ecmacore/object/call.html

javascript는 함수 실행시에 아래 두 개의 객체의 도움을 받는다.

  • arguments object: 실행될 함수에 전달된 매개변수들과 관련된 속성을 가짐
  • call object

이 두 객체는 함께 동작하며, 다음과 같은 일반적인 특징을 가진다.

  • javascript 함수를 지원한다.
  • 임시적으로 존재한다.
  • 함수가 실행될 때 만들어졌다가 함수가 종료되면 사라진다.
    • call object는 argumets object를 참조한다.
    • 이 포인터는 call object의 속성이다.
    • 이 포인터는 "arguments"라는 이름으로 식별된다.
    • 이 포인터는 argument object이 속성에 접근시에 사용된다.
    • 이 포인터는 함수 실행 시 함수 몸체에서 사용할 수 있다.

[the call object description]

call object는 특별한 임시 객체로 함수가 실행되는 동안 존재한다. call object는 두 가지 중요한 목적을 가진다.

  • argument object를 가리키는 포인터를 제공한다.
  • 함수 실행 시 scope chain을 관장한다.

call object는 이 외의 다른 속성이나 기능이 없다.

[the pointer to the arguments object]
call object는 argument object를 가리키는 포인터를 제공한다. 이 속성이 바로 arguments 속성이다. arguments 속성을 통해 argument object의 속성에 접근할 수 있다.

javascript는 왜 arguments 속성을 call object에 넣어두었을까? 이유는 다음과 같다.

  1. arguments object는 native object가 아니기 때문에 인스턴스를 만드는 등, 끌어다 쓸 방법이 없다. 즉, arguments object의 속성에 접근할 수 있는 방법이 없는거다. 그래서 call object에 arguments object를 가리키는 포인터(속성)을 제공하는 것이다. call object와 arguments object는 함수 실행시에 동시에 만들어졌다가 함수 실행 종료와 함께 동시에 사라진다. javascript의 함수 실행되는데 일조하는 친구들이다.
  2. arguments 속성은 함수의 지역 변수와 함께 scope chain에 들어가야 한다. 그래야만 함수 중첩시에 적절한 arguments object에 접근할 수 있다.

[administer the scope chain]
call object는 함수 실행 중에만 존재한다. call object는 scope chain에 아래 나열한 것들을 가져다놓는다.

  • 함수 내에 선언된 지역 변수
  • 함수에 넘겨진 매개 변수
  • 함수 표현을 도와주는 arguments object의 포인터, 우리가 알고 있는 바로 그 arguments!

위에 나열한 것들은 모두 call object의 속성들이다. call object는 global object와 결합되어 처리한다. 모든 전역 변수들은 global object의 속성이다. 페이지가 초기화될 때 global object는 전역 변수들을 scope chain에 올린다. call object의 목적은 scope chain에 전역 변수에 앞서 지역 변수를 올리는 것이다. javascript는 전역 변수와 지역 변수가 이름이 같다고 해도 지역 변수에 전역 변수가 덮어써지지 않도록 한다. 함수 중첩 시에도 각 함수들은 나름의 call object를 가진다.

요약하자. 두 개의 함수가 같은 이름을 가지고 있을 때 그 독립성은 유지된다.

  • 하위 객체의 scope chain에 있는 변수는 상위 객체의 같은 이름을 가진 변수로 덮어써지지 않는다.
  • 중첩 함수들은 나름의 call object를 통해 지역 변수의 독립성을 보장받는다. 함수 안의 call object는 scope chain의 최상위에 존재한다.
  • call object가 scope chain에서 사라지면, 하위 객체의 변수들은 해당 함수 실행 시에 적절한 scope에서 다시 접근할 수 있다.


저작자 표시 비영리 변경 금지
신고

'making web > javascript' 카테고리의 다른 글

The Call Object  (0) 2011.06.12
How Javascript Timer Work  (0) 2011.06.11
setTimeout with a shorter delay  (0) 2010.03.29
이런 잡스런... - -;  (0) 2010.01.25
Enjoying the Observer pattern with custom events  (0) 2010.01.17
Stuart Langridge: Secrets of Javascript Closures, part 1  (1) 2010.01.14

How Javascript Timer Work

making web/javascript 2011.06.11 14:36

초짜일 때 javascript timer가 어떻게 작동하는지 잘 이해해둬야 한다. 종종 예상치 못하게 동작할 때가 있는데 이게 다 single thread이기 때문이다. timer를 생성하고 조작하는 세 개의 함수를 예제를 통해 살펴보자.

  • var id = setTimeout(fn, delay);
    delay 이후에 fn이 한 번만 실행되는 타이머 생성. 반환되는 timer id값은 timer 중단시에 사용된다.
  • var id = setInterval(fn, delay);
    매 delay마다 fn이 실행되는 timer 생성. timer가 중단될 때까지 계속 실행됨
  • clearInterval(id); clearTimeout(id); 
    timer 생성시에 반환된 timer id로 timer 중단시킴.

timer에 대해 파들어가기 전에 기억해야 할 것은, timer는 의도한대로 동작한다는 걸 보장하지 않는다는 것이다. 브라우저에서 javascript는 single thread로 실행되기 때문에 비동기 이벤트(마우스 클릭이나 timer)는 실행 가능한 상황에서만 동작한다. 아래 좋은 예제 그림이 있다.

이 그림을 제대로 이해한다면, javascript 비동기 실행이 어떻게 작동하는지 느낌이 올 것이다. 단순한 1차원 그림이다. 세로축은 밀리초 단위의 시간이고, 파란 박스들은 실행된 javascript를 나타낸다.보면, 첫 번째 Javascript 블럭은 18ms 정도 실행되었고, mouse click callback 블럭은 11ms 쯤 실행되었다.

Javascript는 한 번에 하나의 코드 조각이 실행될 수 있기 때문에(single thread니까) 각각의 블럭들은 다른 비동기 이벤트(마우스 클릭, timer, ajax 요청이 끝났을 때 등...) 진행을 "blocking"한다. queue에 쌓여서 실행 대기 상태가 된다.(브라우저마다 다르지만, 단순하게~)

첫 번째 Javascript 블럭을 보면 두 개의 timer가 생성되었다. 10ms setTimeout, 10ms setInterval! 10ms 후에 timer가 실행되나 한 번 보자. 보시다시피, 실행되지 않는다! 실행되어야 할 fn은 실행 가능할 때 실행되겠다며 queue에 들어가셨다.

첫 번째 javascript block에는 8ms쯤에 mouse click도 발생했다. mouse click의 callback 함수 역시 바로 실행되지 못하고 나중에 실행하시겠다며 queue로 들어가셨을 테다.

javascript block이 끝나면 브라우저가 물어본다. 실행 대기하고 계신 분 있냐고? mouse click handler와 timer callback이 손을 들지만 먼저 들어와계셨던 mouse click callback를 실행하게 된다(그림에서 약 11ms 동안 실행됨). 그럼 timer callback은? 실행 가능한 다음 기회를 노린다.

mouse click handler가 실행되는 동안 10ms interval이 발생했지만 역시 queue로 들어가게 된다. 그 다음 10ms interval이 발생하면? 또 queue에 들어갈까? 큰 블럭의 코드가 실행 중이라고 했을 때 그 간의 모든 interval callback이 queue에서 실행을 기다리고 있을까? 그렇진 않다. 큰 블럭의 코드의 실행이 끝났을 때 모든 interval callback들이 다다다다~~ 실행될테니까. interval callback인 경우에 브라우저는 한 놈만 queue에 유지한다고 생각하면 되겠다. 그래서 30ms쯤에 10ms interval이 발생해도 그냥 dropped된 것이다. 이미 실행대기 queue에는 interval callback이 있으니까.

세 번째 10ms interval이 발생했을 때를 보면, interval callback이 실행 중임을 확인할 수 있다. interval은 지금 뭐이가 실행되고 있는지 전혀 상관치 않는다. 지금 실행 안되면 일단 queue에 들어가신다. 이렇게 되면, 중간에 끼어드는 일이 없을 경우에 interval callback 실행이 끝난 뒤에 또 interval callback이 실행될 것이다. (callback의 기능에 따라서 사용자에게 나쁜 경험을 줄 수도 있을 듯)

두 번째 interval callback까지 실행이 끝나고 나면 javascript 엔진이 실행할 것이 없어 텅 빈 것을 볼 수 있다. 브라우저가 다음 비동기 이벤트를 기다리고 있다는 의미이다. 50ms에 네 번째 10ms interval이 발생하고 callback이 실행될 것이다. 이 때에는 'blocking' 요소가 없기 때문에 제 시간에 바로 실행된다. 네 번째만에 처음으로 제 시간에 실행이 된 셈.

setTimeout과 setInterval의 차이첨을 아래 예제를 통해 살펴보자.

 setTimeout(function() {
  /* Some long block of code... */
  setTimeout(arguments.callee, 10);
}, 10);

setInterval(function() {
  /* Some long block of code... */
}, 10);

두 개의 문장은 같아 보이지만 그렇지 않다. setTimeout 코드는 callback이 실행된 후 10ms 후에 다음 callback이 실행된다. 하지만 setInterval의 경우, 앞에서 설명했던 것처럼 이전 callback이 언제 실행되었는지 상관없이 매 10ms마다 callback을 실행하려고 할 것이다.

요약해봅시다!

  • javascript 엔진은 single thread이다. 비동기 이벤트는 실행 대기를 위에 queue에 쌓인다.
  • setTimeout과 setInterval은 비동기 코드의 실행 방법 자체가 다르다.
  • timer는 바로 실행되지 못할 경우 다음 실행 가능할 때까지 blocking된다(생성 당시 선언했던 delay보다 더 흐른 뒤에 callback이 실행됨).
  • interval은 delay가 없을 경우 선언해둔 지연 시간마다 실행된다.


저작자 표시 비영리 변경 금지
신고

'making web > javascript' 카테고리의 다른 글

The Call Object  (0) 2011.06.12
How Javascript Timer Work  (0) 2011.06.11
setTimeout with a shorter delay  (0) 2010.03.29
이런 잡스런... - -;  (0) 2010.01.25
Enjoying the Observer pattern with custom events  (0) 2010.01.17
Stuart Langridge: Secrets of Javascript Closures, part 1  (1) 2010.01.14

The New Twitter.com!

web 2010.09.15 12:33

The New Twitter Logo

new twitter logo

저작자 표시 비영리 변경 금지
신고

'web' 카테고리의 다른 글

The New Twitter.com!  (0) 2010.09.15
The final front page of the Rocky Mountain News  (0) 2009.03.01
네이버홈 FF2에서 레이아웃 깨짐  (6) 2009.01.02
네이버홈 개편  (0) 2009.01.01
사용자들이 웹에서 뭐하고 노는지!  (0) 2008.05.09
레몬펜... 막 이러시는거지...  (0) 2008.03.15

휴가 직전..

i am 2010.07.08 00:39
19일부터 일주일 휴가.

입사, 이제 겨우 2.5년!
나름 최장기간 휴가다.

이래저래 맘이 편치 않긴한데
다 접고 질렀네..

주말합쳐 9일인데
신랑이랑 약속한거 잘 지키고,
미뤄둔 책도 다 읽었음싶네.

깔끔하게 배포할거 다 하고
깔끔한 맘으로 푹~ 쉬자!
푹!!

이 녀석들도 자주 산책 약속!



iPhone 에서 작성된 글입니다.
신고

'i am' 카테고리의 다른 글

휴가 직전..  (0) 2010.07.08
아이폰에서 올려보고 테스트으~~  (0) 2010.03.18
자자. 좀!  (0) 2010.01.13
화이팅!  (0) 2009.12.24
간만에 홍대  (0) 2009.12.05
작년 이맘때...  (6) 2009.08.26


티스토리 툴바