javascript:기초

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- javascript:기초 [2011/11/07 21:49]
kwon37xi [Class 없이 객체 생성하고 메소드 추가하기]
+++ javascript:기초 [2011/11/14 16:31]
kwon37xi
@@ 줄 89: / 줄 89: @@
     name: "Tarzan"
 };
+console.log(jane.describe());
+console.log(tarzan.describe());
 </code>
+==== Class 객체의 method를 Event Handler Function으로 등록하기 ====
+Class 객체의 method는 원칙적으로 this가 객체를 가리켜야 하지만, **이벤트 핸들러로 등록되면 이벤트를 발생시킨 객체를 this로 가지게 되는 현상이 발생한다.**
+이 문제를 해결하려면 [[http://stackoverflow.com/questions/229080/class-methods-as-event-handlers-in-javascript|Class methods as event handlers in javascript? - Stack Overflow]]에 나온 방법을 사용해야 한다.
+<code javascript>
+ClickCounter = function(buttonId) {
+    this._clickCount = 0;
+    var that = this;
+    document.getElementById(buttonId).onclick = function(){ that.buttonClicked() };
+}
+ClickCounter.prototype = {
+    buttonClicked: function() {
+        this._clickCount++;
+        alert('the button was clicked ' + this._clickCount + ' times');
+    }
+}
+</code>
+핵심은 이벤트 핸들러를 등록할 때 **this를 that으로 매핑하고, ''that.buttonClicked()''를 호출하도록 function()으로 감싸는 부분**이다. 이렇게 하면 클래스 메소드에서는 ''this''를 원래 객체를 가리키는 것으로써 온전하게 사용할 수 있다.

javascript/기초.txt · 마지막으로 수정됨: 2022/01/22 12:44 저자 kwon37xi