$proxy 메소드에 대해서 알아보자.

$proxy 메소드에 대해서 알아보자.

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
    });
}

this.name에서의 this는 Person이라는 함수를 가리키고 있을 것이다.

Person 함수를 내부에서도 가리킬 필요가 있다면 어떻게 해야할까?

우리는 이 함수를 생성한 객체를 가리키고 있는 this를 끌고 내려오기 위해,

this의 주소를 self라는 변수에 저장하여 끌고 내려왔다.

이렇게 하게되면 self은 Person이라는 함수를 생성한 객체를 가리킬 것이고,

function(event) 내부의 this는 event를 가리킬 것이다.

이 불편함을 해결하기 위해 jQuery에서 proxy라는 메소드를 제공한다.

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

ECMA 5에서는 bind라는 메소드를 제공하여 이를 해결한다.

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
}