jQuery.proxy () 사용법

jQuery.proxy () 사용법

---

에 대한 API를 읽었습니다 jQuery.proxy(). 유망 해 보이지만 어떤 상황에서 이것이 최선의 사용인지 궁금합니다. 누구든지 나를 깨달을 수 있습니까?

---

this특정 개체에 값이 바인딩 된 함수를 원할 때 . 예를 들어 이벤트 핸들러, AJAX 콜백, 시간 초과, 간격, 사용자 정의 객체 등과 같은 콜백에서.

이것은 유용 할 수있는 상황의 제조 된 예일뿐입니다. Person속성 이름을 가진 객체 가 있다고 가정 합니다. 또한 텍스트 입력 요소와 연결되어 있으며 입력 값이 변경 될 때마다이 사람 개체의 이름도 업데이트됩니다.

function Person(el) {
    this.name = '';

    $(el).change(function(event) {
        // Want to update this.name of the Person object,
        // but can't because this here refers to the element
        // that triggered the change event.
    });
}

우리가 자주 사용하는 한 가지 해결책은 this 컨텍스트를 변수에 저장하고 다음과 같은 콜백 함수 내에서 사용하는 것입니다.

function Person(el) {
    this.name = '';

    var self = this; // store reference to this

    $(el).change(function(event) {
        self.name = this.value; // captures self in a closure
    });
}

또는 jQuery.proxy여기에서 참조가 this이벤트를 트리거 한 요소 대신 Person의 개체를 참조하도록 사용할 수 있습니다 .

function Person(el) {
    this.name = '';

    $(el).change(jQuery.proxy(function(event) {
        this.name = event.target.value;
    }, this));
}

이 기능은 이제 prototypejsbind 에서 빌린 메소드를 포함하는 ECMAScript 5로 표준화되었으며 이미 일부 브라우저에서 사용할 수 있습니다.

function Person(el) {
    this.name = '';

    $(el).change(function(event) {
        this.name = event.target.value;
    }.bind(this)); // we're binding the function to the object of person
}

---

클로저에 대한 컨텍스트를 설정하는 간단한 방법입니다. 예를 들면 다음과 같습니다.

$(".myClass").click(function() {
  setTimeout(function() {
    alert(this); //window
  }, 1000);
});

그러나 종종 우리 this는 다음과 같이 사용했던 방법과 동일하게 유지 하기 를 원합니다 $.proxy().

$("button").click(function() {
  setTimeout($.proxy(function() {
    alert(this); //button
  }, this), 1000);
});​

일반적으로 지연된 호출에 사용되거나 클로저를 선언하는 긴 방법을 원하지 않는 곳에서 사용됩니다. 컨텍스트를 객체로 가리키는 문자열 방법은 ... 아직 매일 코드에서 실용적인 사용을 보지는 못했지만 응용 프로그램이 있다고 확신합니다. 객체 / 이벤트 구조가 무엇인지에 따라 다릅니다.

---

예를 들어 콜백을 생성하려는 경우. 대신에:

var that = this;

$('button').click(function() {
    that.someMethod();
});

넌 할 수있어:

$('button').click($.proxy(this.someMethod, this));

또는 콜백을 수락하는 플러그인을 만들고 콜백에 대한 특정 컨텍스트를 설정해야하는 경우.

참고 URL : https://stackoverflow.com/questions/3349380/jquery-proxy-usage