javascript의 this에 대해서 궁금했는데 잘 설명해 놓은 글이 있어서 링크해놓는다.
http://www.quirksmode.org/js/this.html
Owner
아래에서 this는 어떤 것을 가리키고 있을까?
function doSomething() {
this.style.color = '#cc0000';
}
자바스크립트에서 this는 항상 "owner"를 가리킨다. owner란 function을 실행시킨 객체를 가리키며 다른말로, function을 소유하고 있는 object라고 이해하면 되겠다. 위에서 this는 window object를 가리킨다.
------------ window --------------------------------------
| / \ | | | | | this | | ---------------- | | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | -------------------- | | | onclick property | | | -------------------- | | | ----------------------------------------------------------
만약 doSomething()이 저 상태에서 불려진다면 this 키워드는 window를 가리키고 윈도우의 style.color를 변경하려 들것이다.
그러나 윈도우에는 style 객체를 가지고 있지 않기때문에 function은 실행 중 에러가 나게된다.
Copying
따라서 만약 this를 제대로 사용하고 싶다면 올바른 HTML element에 "owned(소유)" 될 수 있도록 해야한다.
다시말해, copy를 해야한다는 것이다. Traditional event registration 라고 부르는 방법이다.
element.onclick = doSomething;
요래하면 function은 완전하게 onclick으로 copy된다. (onclick은 이제 method가 되었다.) 따라서 이제 onclick 이벤트가 일어나면 this는 element라는 HTML element를 가리키게된다.
------------ window -------------------------------------- | | | | | | | ---------------- | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | |
----------------------------------------------------------
이제 이런 트릭으로 우리는 doSomething() function을 여러 이벤트 핸들러에게 넘겨줄 수 있게 되었다.
이벤트가 발생할 때마다 this는 올바른 HTML element를 가리키게 될 것이다.
------------ window -------------------------------------- | | | | | | | ---------------- | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | | | | | ----------------------- | | | | another HTML element| <-- this | | | ----------------------- | | | | | | | | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | |
----------------------------------------------------------
그러므로 이제 function이 호출될 때마다 doSomething의 this는 소유된 각 HTML element를 가리키게 될 것이다.
Referring
하지만 만약 inline event registration을 사용한다면
<element onclick="doSomething()">
당신은 function을 copy한 것이 아니다! 대신 그냥 참조할 뿐이고 이 차이는 중요하다.
onclick property는 실제 function 내용을 담고 있지 않고, 실제로는 단지 호출하기만 할 뿐이다.
doSomething();
그러므로 이것은 "doSomething() 함수로 가서 이것을 실행하라"는 것이다.
------------ window -------------------------------------- | / \ | | | | | this | | ---------------- | | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- / \ | | | go to doSomething() | | | | | and execute it | ---- reference to | | ----------------------- function | | |
Examples - copying
Examples - referring
Combination
'Programing > Javascript' 카테고리의 다른 글
javascript code beautify (pretty print) (0) | 2013.06.25 |
---|---|
javascript class 상속 (0) | 2012.06.28 |