[JavaScript] - 자바스크립트의 this 포인터

1. this 포인터

C++, Java 등과 같은 객체지향 언어를 이용하여 프로그래밍할 때, this 포인터는 매우 유용하게 사용된다. C++에서 this 포인터에는 해당 클래스의 주소가 저장되어 있으며, 컴파일 과정에서 컴파일러가 자동으로 선언하기 때문에 프로그래머가 명시적으로 선언할 수 없다.

브라우저 환경에서 실행되는 웹 어플리케이션은 대부분 유저인터페이스(user interface, UI)를 통해 이용자의 입력에 따라 코드가 실행되는 이벤트 기반 응용 프로그램이다. 이러한 웹 어플리케이션의 특징 때문에 웹 어플리케이션을 개발하고자 자바스크립트를 이용할 때는 이벤트 반응형 프로그래밍(event-driven programming) 형식을 많이 이용하게 된다. 이벤트 반응형 프로그래밍에서 this 포인터는 잘 활용하면 짧은 코드로 많은 기능을 구현할 수 있지만 객체, 이벤트 핸들러, 이벤트가 발생하는 요소 등 this 포인터가 가리킬 수 있는 대상이 다양하기 때문에 부주의하게 this 포인터를 이용하면 수많은 런타임 에러를 초래할 수 있다.

2. 자바스크립트의 this 포인터

가장 먼저, 자바스크립트에서 this 포인터는 객체 자신을 가리킬 때 이용할 수 있다. 아래와 같은 코드에서 this는 Person 객체 자신을 가리키며 Person 객체 내부에서 this.변수의 형태로 자신의 멤버 변수에 접근할 수 있다.

function Person(name, gender, age) { this.name = name; this.gender = gender; this.age = age; } Person.prototype.showInfo = function () { console.log(this.name); console.log(this.gender); console.log(this.age); }

또한, 자바스크립트에서는 객체에 이벤트 핸들러를 정의하여 이벤트를 처리하기 때문에 이벤트 핸들러 내부에서 this 포인터는 이벤트 이벤트가 발생한 요소를 가리킨다. 아래의 코드는 obj1이라는 객체가 클릭 되었을 때, 객체 내부의 텍스트를 콘솔 창에 출력하는 코드이다.

var obj1 = document.getElementById('button01'); obj1.onclick = function () { console.log(this.innerText); }

아래와 같이 리스트에 10개의 div 객체를 추가하고, div 객체가 클릭될 때 자신의 내부 텍스트를 콘솔창에 출력하는 코드가 있다. 그러나 이 코드는 제대로 동작하지 않는데, 모든 div 객체가 클릭 시에 button9를 출력하기 때문이다.

var list = document.getElementById('list'); for (var i = 0; i < 10; i++) { var div = document.createElement('div'); div.innerText = 'button' + i.toString(); div.onclick = function () { console.log(div.innerText); } list.appendChild(div); }

반복문 내부에서 div 객체에 계속 새로운 객체를 할당하고 있기 때문에 이벤트 핸들러가 동작하는 시점에서 div 객체는 마지막에 할당된 button9가 된다. this 포인터를 이용하면 이러한 문제를 해결할 수 있는데, 아래와 같이 div.innerText를 this.innerText로 변경하면 된다. 이렇게 코드를 변경하면 이벤트 핸들러가 동작하는 시점에서 이벤트가 발생한 요소의 내부 텍스트값을 읽도록 실행되기 때문에 프로그램이 정상적으로 동작한다.

var list = document.getElementById('list'); for (var i = 0; i < 10; i++) { var div = document.createElement('div'); div.innerText = 'button' + i.toString(); div.onclick = function () { console.log(this.innerText); } list.appendChild(div); }