[오리지널] jQuery의this와 $(this)

인터넷에는 jQuery의this와 $(this)에 대한 소개가 많은데 대부분은this와 $(this)의 지향을 정리했을 뿐이다. 사실 이것은 응용 장소가 있기 때문에 jQuery에서 구성원 함수를 호출할 때this는dom의 대상을 일률적으로 논할 수 없다.
$(this)가 jQuery 대상을 가리키는 것은 나무랄 데가 없지만,this는dom 대상을 가리킨다. 이것은 jQuery가 특수한 처리를 했기 때문이다.　
 
dom의 jQuery 대상을 만들 때, jQuery는dom에 jQuery 대상을 만들 뿐만 아니라, dom를 만든 대상의 그룹에 저장합니다.
 

  elem = document.getElementById(match[2]);
  if (elem && elem.parentNode) {
    this.length = 1;
    this[0] = elem;
  }

  this.context = document;
  this.selector = selector;
  return this;

 
this[0] = elem이라는 문장은 바로 실현 대상의 수조이다.그래서javascript는 매우 재미있는 언어로this를 사용하여 접근할 때 가리키는 대상의 구성원 함수에 접근할 수 있지만 사실this는 또 하나의 대상 수조이다.그 저장소는dom 대상입니다.
 
먼저 $("p") 를 보십시오.each() - 주기
 
 

each: function( callback, args ) {
		return jQuery.each( this, callback, args );
	}

 
each 함수의 호출을 보시면 아시겠지만, jQuery.each( this, callback, args );호출된 것은 대상 수조이고, 대상의 수조는dom 대상이기 때문에 콜백 함수 중의this는dom 대상이다
 
 
$("p") 를 다시 보십시오.hide -- 구성원 함수
 
 

hide: function() {
		return showHide( this );
	},

 function showHide( elements, show ) {var elem, display,
		values = [],
		index = 0,
		length = elements.length;

	for ( ; index < length; index++ ) {
		elem = elements[ index ];
		if ( !elem.style ) {
			continue;
		}
		values[ index ] = jQuery._data( elem, "olddisplay" );
		if ( show ) {
			// Reset the inline display of this element to learn if it is
			// being hidden by cascaded rules or not
			if ( !values[ index ] && elem.style.display === "none" ) {
				elem.style.display = "";
			}

			// Set elements which have been overridden with display: none
			// in a stylesheet to whatever the default browser style is
			// for such an element
			if ( elem.style.display === "" && isHidden( elem ) ) {
				values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
			}
		} else {
			display = curCSS( elem, "display" );

			if ( !values[ index ] && display !== "none" ) {
				jQuery._data( elem, "olddisplay", display );
			}
		}
	}

	// Set the display of most of the elements in a second loop
	// to avoid the constant reflow
	for ( index = 0; index < length; index++ ) {
		elem = elements[ index ];
		if ( !elem.style ) {
			continue;
		}
		if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
			elem.style.display = show ? values[ index ] || "" : "none";
		}
	}

	return elements;
}

위의 코드에서 알 수 있듯이hide 줄 수는 사실 showHide를 호출하고 전송된 첫 번째 인자인this는dom 대상이 아니라 jQuery 대상의 그룹이다. 따라서 showHide 함수는 이 대상의 그룹을 순환해서 모든dom 대상을 가져온다.
 
마지막으로 $("p") 를 보십시오.bind -- 이벤트
 
 

bind: function( types, data, fn ) {
		return this.on( types, null, data, fn );
	},

 
 
 

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
		//        
		return this.each( function() {
			jQuery.event.add( this, types, fn, data, selector );
		});
	},

 
 
bind 함수는 on 함수를 호출하고, on 함수는 each 함수를 통해 jQuery를 실현한다.event.add.그래서 jQuery.event.dd(this의this는dom의 대상이다.그래서 사건의this는dom의 대상이다.