Making jQuery Plugin(5)

jQuery 플러그인 내부에서의 this

jQuery.fn으로 연결되는 메서드를 '플러그인'이라고 합니다. 플러그인은 자바스크립트 프로토타입(JavaScript Prototype)을 활용한 객체 확장 방법으로, 연결된 객체 인스턴스는 확장된 메서드를 사용할 수 있게 됩니다.

							jQuery.fn.플러그인 이름 = function () {
								//.. 구현 코드
							};
						

플러그인 메서드 내부에는 this 키워드를 사용할 수 있는데, this 키워드는 연결된 jQuery() 래퍼 객체를 가리킵니다. 하지만 메서드 내부에서 return 처리되는 this.each() 내부의 함수에서 this는 jQuery 객체가 아닌 연결된 DOM 객체를 가리킵니다.

							jQuery.fn.플러그인 이름 = function () {
								... this			// jQuery 객체
								return this.each(function() {
									... this		// DOM 객체
								});
							};
						

파이어버그 콘솔 창에서 테스트한 결과, jQuery.fn.plugin에 연결된 함수 리터럴 내부에서 this를 확인하면 플러그인을 호출한 jQuery('body').plugin(); 구문에서의 jQuery('body')를 가리키는 것을 알 수 있습니다. 하지만 return this.each() 코드 문 내부의 함수에서 this는 <body> DOM 객체를 가리키는 것을 확인할 수 있습니다. 즉, jQuery 플러그인 내부에서 this는 컨텍스트에 따라 달라질 수 있습니다. 플러그인을 제작하려면 이 점을 반드시 기억하고 있어야 합니다.

return this.each(function() { })문 내부에서 사용되는 this는 DOM 요소를 가리키므로, jQuery 메서드를 내부에서 사용하기 위해서는 jQuery 객체로 랩핑해야 합니다. 일반적으로 래핑된 객체를 $this 변수에 캐시합니다.