2014년 6월 10일 화요일

jQuery.proxy


function Obj(){
	
	this.init = function(text){
		this.text = text;	
		
		var span = $("",{
						text:this.text,
						click:$.proxy(this, 'clickHandler')
					});
		
		$("#proxyTest").append(span);
	};
	
	this.clickHandler = function(){
		alert(this.text);
	};
}


$(function(){
	
	var Obj_1 = new Obj();
	Obj_1.init("프록시테스트1");
	
	var Obj_2 = new Obj();
	Obj_2.init("프록시테스트2");
});

id가 proxyTest 인 엘리먼트를 두고 위와 같은 코드를 작성할시 
프록시테스트1프록시테스트2 라고 화면에 나타난다.

위 코드의 목적은 프록시 설명을 위한거인데 프록시는 대리자, 대리인의 뜻을 가지고있다. 
뭐 뜻이 중요한건 아니고 아무튼 $.proxy 의 역할을 설명하자면
this 를 이용해 현재 context 의 'clickHandler' 속성을 확장한다는 뜻이다.

무슨 뜻이냐하면
만약에 
function Obj(){
	
	this.init = function(text){
		this.text = text;	
		
		var span = $("",{
						text:this.text,
						click:this.clickHandler
					});
		
		$("#proxyTest").append(span);
	};
	
	this.clickHandler = function(){
		alert(this.text);
	};
}
위와 같이 작성할때 아무런 문제가 없어보인다. 하지만 실제로 클릭을 해보면
아무런 반응이 없거나 스크립트 오류가 날 것이다. 그 이유는 이벤트 발생시에 
this에 해당하는 객체가 재정의되기 때문이다.
실제로 this를 찍어보면 jQuery234234234 이런 값이 있는 것을 확인 할 수 있다.
그래서 $.proxy 메소드를 이용하여 원래의 this를 이용해서 확장시켜주는 것이다.

요약:span의 click 이벤트핸들러가 실행되는 시점의 컨텍스트 즉, 실행주체가 변경되기 때문에
this 키워드가 가리키는 객체가 달라지는 것이다.

댓글 없음:

댓글 쓰기