jQuery 이벤트에서 'this'의 가치 제어

StackOverflow https://stackoverflow.com/questions/520019

  •  21-08-2019
  •  | 
  •  

문제

jQuery를 사용하여 '컨트롤'을 만들었고 jQuery.extend를 사용하여 가능한 한 OO를 만들기 위해 도움을주었습니다.

내 컨트롤의 초기화 중에 나는 같은 다양한 클릭 이벤트를 연결합니다.

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

내가 바인드 메소드의 데이터 인수로 '이것'을 포기하고 있음을 주목하십시오. 클릭 이벤트를 시작하는 요소에서 제어 인스턴스에 첨부 된 데이터를 얻을 수 있도록이 작업을 수행합니다.

이것은 완벽하게 작동하지만 더 나은 방법이 있다고 생각합니다.

과거에 프로토 타입을 사용한 후, 나는 '이것'의 가치가 무엇인지 제어 할 수있는 바인드 구문을 기억합니다.

jQuery way는 무엇입니까?

도움이 되었습니까?

해결책

당신이 사용할 수있는 jQuery.proxy() 익명의 기능을 사용하면 '컨텍스트'가 두 번째 매개 변수라는 것이 조금 어색합니다.

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

다른 팁

나는 당신의 길을 좋아합니다. 실제로 비슷한 구조를 사용합니다.

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

그리고 이것의 첫 번째 줄.

var self = event.data.self;

나는 당신이 요소를 클릭하여 (이것으로) 클릭을 클릭하지 않고 자아로 클릭하기 때문에 이런 방식이 마음에 듭니다.

jQuery는 다음과 같습니다 jQuery.proxy 방법 (1.4 이후 사용 가능).

예시:

var Foo = {
  name: "foo",

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

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

나는 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));

이런 식으로 주어진 객체를 '이'범위로 호출하는 createLegate ()로 동적 '래퍼 함수'를 만들 수 있습니다.

예시:

function foo() {
    alert(this);
}

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

HTML 5 호환 브라우저는 a 바인드 방법 ~에 Function.prototype 그것은 아마도 가장 깨끗한 구문 일 것이고 프레임 워크 의존적이지는 않지만 IE 9까지 내장되어 있지는 않지만 ( 폴리 필 그래도 브라우저가없는 브라우저.)

예를 바탕으로 다음과 같이 사용할 수 있습니다.

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

(사이드 참고 : 첫 번째 bind 이 진술에는 jQuery의 일부이며 아무 관련이 없습니다. Function.prototype.bind)

또는 약간 더 간결하고 최신 jQuery를 사용하려면 (그리고 두 가지 다른 종류의 혼란을 제거하십시오. bind에스):

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

JavaScript를 사용할 수 있습니다 묶다 다음과 같은 방법 :

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

var object = {coolValue: "bla"};


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

jQuery는 바인딩을 지원하지 않으며 선호하는 방법은 함수를 사용하는 것입니다.

JavaScript에서 this.availableCategoryClick 은이 개체에서 availableCategoryClick 함수를 호출하는 것을 의미하지 않기 때문에 jQuery는이 선호하는 구문을 사용하도록 조언합니다.

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

JavaScript의 OO 개념은 이해하기 어렵고 Functionnal 프로그래밍은 종종 쉽고 읽기 쉽습니다.

기능이 범위가 바뀌는 것을 보는 가장 일반적인 방법은 var self = this.

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top