JQuery와 크기 조정

Question

가정 JQuery와가 포함되어있는 '이'참조를 잃게 :

function FixedPoint(bgWidth) { 
     this.bgWidth= bgWidth; 

     this.plot(); 
     $(window).resize(this.plot); 

    } 

    FixedPoint.prototype.plot = function() { 

     console.log(this.bgWidth); //This is undefined when called by resize 

    } 

    var pt1 = new FixedPoint(1920); 

플롯() 생성자 또는 초기화 모든 확인 후 호출되고 있지만, 플롯()가 크기 조정에 의해 호출 될 때 때 함수를 사용하면 더 이상 'this'를 통해 인스턴스 변수에 액세스 할 수 없습니다.

이 문제를 해결하기 위해 생성자의 크기를 조정할 수 있지만 클래스에 정리가 필요합니다.

Answer 1

$(window).resize(this.plot);this.plot은 window 컨텍스트 내에서 호출됩니다. 그래서 이것이 예상 된 행동입니다. this은 FixedPoint 대신 창 개체를 가리 킵니다. Ecmascript5 function.bind을 사용하여 컨텍스트를 명시 적으로 바인딩 할 수 있습니다.

 $(window).resize(this.plot.bind(this)); 

jquery를 사용하면 $.proxy과 동일한 작업을 수행 할 수 있습니다.

더 많은 통찰력을주기 위해 this 컨텍스트는 메서드가 호출 된 위치 (바인딩 된 함수 제외)를 기반으로 설정됩니다. 여기에 resize 윈도우 객체의 메소드 내에서 호출되었을 것입니다. 여기서 this은 윈도우를 가리 킵니다.

또 다른 해킹 방법은 익명 콜백 함수를 사용하고이 변수를 캐시하는 것입니다.

function FixedPoint(bgWidth) { 
    this.bgWidth = bgWidth; 
    var self = this; //cache it here 
    $(window).resize(function() { 
     self.plot(); //invoke with self. 
    }); 
}