1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <script src="js/jquery.js"></script> </head> <body> <button>버튼</button> <script> // proxy : 대리인, 대리권 의미이다. // 데이터를 가져올 때 해당 사이트에서 바로 자신의 PC로 가져오는 것이 아니라 임시 저장소를 거쳐서 가져오는 것 (이라고 검색에는 나온다.ㅋ) var app = { config: { clickMessage: '안녕하세요!' }, clickHandler: function() { console.log(this) // 여기서 this는 app 객체 console.log(this.config.clickMessage); } }; // 메서드에서 this는 메서드를 호출한 객체(context)를 의미한다. // clickHandler 메서드에서 this는 app이다. (당연하겠지..) app.clickHandler(); // 여기선 에러가 난다. // this에 해당하는 객체가(button) 으로 재정의 되었는데 button객체에는 config란 맴버가 없기 때문이다. $('button').bind('click', app.clickHandler); // 이럴때 proxy(대리인.. 임시저장소를 거쳐서..??)을 통해 clickHandler 메서드의 this는 app객체로 유지할수 있게 한다. // 다음 처럼 말이다. // $.proxy( context, name ) $('button').bind('click', $.proxy(app, 'clickHandler')); // clickHandler함수를 proxy(대리인)을 거쳐 이벤트 연결하였다. // 또는 (결과는 같다.) // $.proxy( function, context ) // $('button').bind('click', $.proxy(app.clickHandler, app)); //-------------------------------------------------------------------------------------------------------------------------------------- // setTimeout 의 context(this)변경 $("button").click(function() { setTimeout(function() { console.log(this); //window }, 1000); }); $("button").click(function(event) { setTimeout($.proxy(function() { console.log(this); //button }, this), 1000); }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] addBack() - 선택된 요소의 이전 선택된 요소도 확장집합에 함께 추가 (0) | 2015.08.28 |
|---|---|
| [jQuery] triggerHandler - 이벤트 핸들러만 실행 (0) | 2015.08.27 |
| [jQuery] input 숫자만 입력받기 (0) | 2015.08.18 |
| [jQuery] select option 제어 - value값 text로 선택되게 (1) | 2015.08.12 |
| [jQuery] CSS 프로퍼티 삭제 (0) | 2015.08.04 |
