본 포스팅은 아래의 내용을 참조하여 작성되었습니다.
http://www.quirksmode.org/js/this.html
Javascript에서 this가 가리키는 대상이 무엇인지 정리해 보았습니다.
(라고 쓰고 Javascript에서의 Copying과 Referring에 대한 정리 라고 읽어주시면 됩니다.)
간단하게 this가 가리키는 대상을 보면 Java에서의 this와 크게 다르지 않습니다.
Java에서의 this : 현재 실행중인 메소드가 속한 클래스를 지칭
Javascript에서의 this : 현재 실행중인 함수가 속한 Owner를 지칭
하지만 Java에서 보다 Javascript에서의 this가 좀 더 변화무쌍한 녀석으로 인식되는데, 그 이유는 Java의 메소드는 클래스에 종속적 인데 비해 Javascript에서의 함수는 어느곳에나 할당될 수 있기 때문일 것입니다.
//func1
function doSomething(){
this.style.color='#cc0000';
}
//func2
element.onclick = doSomething;
위 코드에서 func1의 경우 this는 window.doSomething 안에서의 this 이므로 window가 됩니다. 하지만 func2의 경우에는 element.onclick에 할당된 함수 안에서의 this 이므로 element가 됩니다.Javascript에서의 함수 할당 방법으로는 Copying과 Referring이 있습니다.
Copying
함수의 복사본을 할당합니다. 위 func2의 경우가 copying에 해당합니다. func2는 다음과 같이 표현한것과 같습니다.
element.onclick = function doSometing(){
this.style.color='#cc0000'
};
this가 element.onclick에서의 this이므로 element가 됨을 좀 더 잘 볼 수 있습니다.아래는 모두 같은 결과를 얻는 copying 할당 방법 입니다.
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() { this.style.color '#cc0000'; }
//at dom property : onclick="this.style.color = '#cc0000';"
Referring
referring은 복사본이 할당되는 것이 아니라 함수를 참조합니다. 아래와 같이 선언한 것을 이야기합니다.
element.onclick = function (){
doSomething(); // just say go to doSomthing..
};
이 경우 doSomething에서의 element가 아닌 func1에 의해 할당된 window가 됩니다.아래는 모두 같은 결과를 얻는 referring 할당 방법들 입니다.
element.onclick = function() {doSomething();}
element.attachEvent('onclick', doSomething)
//at dom property : onclick="doSomething()"
Copying and Referring in Event Handling
IE 계열과 non-IE 계열의 자바스크립트 이벤트 등록을 비교해 보면 다음과 같습니다.
//W3C(non-IE)
element.addEventListener('click', doSomething, false) //Copying
//IE
element.attachEvent('onclick', doSomething) //Referring
IE계열(Microsoft event registration model)에서 쓰이는 방식은 Referring이라서, event의 대상 html element를 알 수 없는 경우가 종종 있습니다. 이를 방지하기 위해 다음과 같이 함수 parameter로 this를 넘기는 방법을 사용하게 됩니다.
//at dom property: onclick="doSomething(this)"
function doSomething(obj) {
// this is present in the event handler and is sent to the function
// obj now refers to the HTML element, so we can do
obj.style.color = '#cc0000';
}
