아래 자바스크립트 클래스 질문한 사람입니다.

[loveisfunny]

문제점을 발견했어요.

Code: Select all

function addEvent(o,e,f,useCapture){

/*익스이면 attachEvent, 파이어폭스이면 addEventListener 로 빼주는 함수.
  o : object, e:event,f:이벤트 발생시 실행시킬 함수, useCapture:잘 모름.
*/
}

함수를 만들고.

Code: Select all

function Chart(){
this.init=function(){

var o=; //o구하는 코드....
addEvent(o,'click',this.showHideToggle);

}

this.showHideToggle=function(){
var a=this.getTarget();

}

this.getTarget=function(e){ 
 //익스이면 window.event.srcElement, FF에서는 e.target을 구하는 함수.

}

}

요런 코드가 있다면

var a=this.getTarget();

요 부분에서 문제가 발생하더군요. VENKMAN을 이용해서 보니깐. this가 이벤트 발생한 객체를 받더라구요.

사실상 this.getTarget()을 호출해줄 필요성은 없게되었지만 this 가 클래스 내부를 지정하게 하는 방법을 알고 싶네요.

코딩한 컴퓨터랑 이 컴이랑 달라서 직접 소스를 복사하지는 못했지만 문법적인 문제는 없습니다.(이 글에선 문법 오류가 있어도 눈감아주시길..)

[loveisfunny]

o.addEventListener 로 처리되기 때문인것 같네요.

결국 this를 부르면, o를 불러와 처리하는거죠..

그래서 메쏘드 내에서 this는 전역으로 인스턴스 생성 후에 인스턴스를 호출하는 방식으로 해결했습니다.

다른 해결책이 있으신분..?

[crizin]

this가 클래스 내부를 가리키게 하는 것 보다는 클래스의 참조를 객체마다 저장해놓는 편이 더 쉬울 것 같네요

Code: Select all

<div id="container"></div>
<script type="text/javascript">
	var TestClass = function(container)
	{
		this.string = "Hello!";

		var input = document.createElement("input");
		input.instance = this;
		input.onclick = this.handler;

		container.appendChild(input);
	}

	TestClass.prototype.handler = function()
	{
		alert("this.string : " + this.string);
		alert("this.instance.string : " + this.instance.string);
	}

	var cls = new TestClass(document.getElementById("container"));
</script>

이런식으로 말이죠.. onclick 이벤트에서 호출되는 함수 내부에서 this는 input box 를 가리키기때문에 클래스 본체에 접근하기 위해서는 어딘가에 클래스의 참조를 저장해둬야 합니다. 전역변수로 선언해둬도 되지만 이렇게 되면 클래스의 인스턴스를 여러개 만들 수 없기 때문에 클래스의 참조를 input 오브젝트의 instance 라는 속성을 만들어 저장해 놓는 것입니다. 이렇게 되면 this.instance 가 클래스를 가리키게 되죠..