jQuery 이벤트에서 'this'값 제어하기

Question

jQuery를 사용하여 '컨트롤'을 만들고 가능한 한 OO로 만들기 위해 jQuery.extend를 사용했습니다. 내가 파징하고 그래서

jQuery('#available input', 
      this.controlDiv).bind('click', this, this.availableCategoryClick); 

공지 사항과 같은 다양한 클릭 이벤트를 와이어 내 컨트롤의 초기화 동안

'이'바인드 방법의 데이터 인수로. 클릭 이벤트를 발생시키는 요소 대신 컨트롤 인스턴스에 연결된 데이터를 가져올 수 있도록이 작업을 수행합니다.

이 그러나 나는 당신의 값이 '이'경우에 무엇을 제어 할 수 바인딩 구문을 기억하고, 과거에 프로토 타입을 사용하는 데 더 좋은 방법

가 의심, 완벽하게 작동합니다.

jQuery 방법이란 무엇입니까?

Answer 1

당신은 '문맥'두 번째 매개 변수입니다 조금 어색 익명 기능을 jQuery.proxy()을 사용할 수 있습니다.

$("#button").click($.proxy(function() { 
    //use original 'this' 
},this)); 

Answer 2

jQuery에는 내장 기능이 없다고 생각합니다. 하지만 도우미는 다음과 같이 구성 사용할 수 있습니다

Function.prototype.createDelegate = function(scope) { 
    var fn = this; 
    return function() { 
     // Forward to the original function using 'scope' as 'this'. 
     return fn.apply(scope, arguments); 
    } 
} 

// Then: 
$(...).bind(..., obj.method.createDelegate(obj)); 

이 방법, 당신은 '이'범위로 지정된 객체와 메소드를 호출 createDelegate() 동적 '래퍼 함수'를 만들 수 있습니다.

예 :

function foo() { 
    alert(this); 
} 

var myfoo = foo.createDelegate("foobar"); 
myfoo(); // calls foo() with this = "foobar" 

Answer 3

jQuery를 지원하지 않는 귀속하고 바람직한 방법은 함수를 사용하는 것이다.

자바 스크립트, this.availableCategoryClick이 개체에 availableCategoryClick 함수를 호출하는 것을 의미하지 않기 때문에, jQuery를이 선호하는 구문을 사용 조언 : 자바 스크립트에서

var self = this; 
jQuery('#available input', self.controlDiv).bind('click', function(event) 
{ 
    self.availableCategoryClick(event); 
}); 

OO 개념 이해하기 어려운이 functionnal 프로그램은 종종 더 쉽고 읽기 쉽습니다.

Answer 4

기능이 범위를 변경하는 것을 보면 가장 일반적인 방법은 var self = this과 같은 것으로 손으로 처리하는 것입니다. 나는 당신의 방법을 좋아

var self = this 

$('.some_selector').each(function(){ 
    // refer to 'self' here 
} 

Answer 5

, 사실 비슷한 구조를 사용 : 당신이 얻을 수 있기 때문에이 방법을 좋아

var self = event.data.self; 

:

$('#available_input').bind('click', {self:this}, this.onClick); 

및 this.onClick의 첫 번째 줄을 요소는 클로저를 사용할 필요없이 (this와 같이) 클릭하고 "this"객체를 self로 클릭합니다.

Answer 6

jQuery에는 jQuery.proxy 메서드가 있습니다 (1.4부터 사용 가능).

예 :

는

var Foo = { 
    name: "foo", 

    test: function() { 
    alert(this.name) 
    } 
} 

$("#test").click($.proxy(Foo.test, Foo)) 
// "foo" alerted 

Answer 7

이 같은 자바 스크립트 bind 방법을 사용할 수 있습니다 5 호환 브라우저가 제공

var coolFunction = function(){ 
    // here whatever involving this 
    alert(this.coolValue); 
} 

var object = {coolValue: "bla"}; 


$("#bla").bind('click', coolFunction.bind(object)); 

Answer 8

HTML을 bind method, 아마도 가장 깨끗한 구문이며 있지만, 프레임 워크에 의존하지 않은 Function.prototype에 IE 9까지는 IE에 내장되어 있지 않습니다. (브라우저가 없으면 polyfill이 있습니다.)

예를 들어,

과 같이 사용할 수 있습니다. 6,

jQuery('#available input', 
     this.controlDiv).bind('click', this.availableCategoryClick.bind(this)); 

(보조 노트 :이 문장의 첫 bind는 jQuery를의 일부이며 Function.prototype.bind와는 아무 상관이 없습니다)

또는 약간 더 간결하고 최신 jQuery를 사용 (과에서 혼란을 제거하기를 bind의 두 가지 종류) : jQuery를이 OO보다 더 많은 기능 때문에 당신이 jQuery를 OO를 만들려고 노력하는 이유

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));