- this가 콜백함수 안에 들어가면 다 같은 this가 아니다.
* 1의 경우
: 첫번째기본적 구조는 이렇게 만들어진 것이라서,
=> 이렇게 한다.
2의 경우 해결을 위해서 1에서의 this를 지역변수로 지정하여 호출.(closure 지정)
$('.clicky').click( function() {
$(this).addClass('clicked'); // 1. click라는 클래스를 가지는 개체 하나하나
setTimeout( function() {
$(this).removeClass('clicked'); // 2. window 객체 자체
}, 1000 );
});
* 1의 경우
: 첫번째기본적 구조는 이렇게 만들어진 것이라서,
function Foo( value ) {
this.value = value;
}
Foo.prototype.alert = function() {
alert( this.value );
};
Foo.alert 내부의 this는 Foo 객체이다.
2의 경우
: 객체 내부의 메서드 호출을 하는것이 아니고, 그냥 함수처럼 호출을 하면 그 내부의 this(즉 setTimeout의 콜백함수)는 window 객체를 참조한다. 그러니까 $(window).removeClass... 이렇게 되는 것이라서, 문제가 생긴다.
: 객체 내부의 메서드 호출을 하는것이 아니고, 그냥 함수처럼 호출을 하면 그 내부의 this(즉 setTimeout의 콜백함수)는 window 객체를 참조한다. 그러니까 $(window).removeClass... 이렇게 되는 것이라서, 문제가 생긴다.
=> 이렇게 한다.
$('.clicky').click( function() {
var $element = $(this);
$element.addClass('clicked');
setTimeout( function() {
$element.removeClass('clicked');
}, 1000 );
});
2의 경우 해결을 위해서 1에서의 this를 지역변수로 지정하여 호출.(closure 지정)
'Jquery Cookbook > 5. 빠르게, 간단하게, 더욱 재미있게' 카테고리의 다른 글
5.11 빠르게 테이블 로딩하기 (0) | 2011.11.10 |
---|---|
5.10 보다 빠른 셀렉터 작성하기 (0) | 2011.11.10 |
5.9 jQuery 개체 캐시하기 (0) | 2011.11.10 |
5.8 병목현상 파악하기 (0) | 2011.11.10 |
5.7 어트리뷰트 토글하기 (0) | 2011.11.10 |
5.6 사용자 정의 반복기 작성하기 (0) | 2011.11.10 |
5.5 다른 라이브러리에서 코드 빌려 쓰기 (0) | 2011.11.10 |
5.4 JQUERY 체인 가독성 높이기 (0) | 2011.11.10 |
5.3 장황한 중복 제거하기 (0) | 2011.11.10 |
5.1 사실 이건 JQUERY가 아니라 자바스크립트다! (0) | 2011.11.10 |