esquire에서 'this'의 범위가 변경되었습니다. JS

Question

enquire.js를 사용하여 화면 크기가 작을 때 bxslider를 다시로드하여 이미지를 더 적게 표시하려고합니다.

다음과 같이 화면 너비를 등록했습니다.

이제 전환의 일부로 현재 클래스의 프로토 타입과 연결된 변수를 기반으로 계산을 수행해야합니다. this 참조 내 모든 다른 기능에

ChildCarousel.prototype = { 
    ... 

    ChangeSliderUp: function() 
    { 
     var maxSlides = (this.ourCarouselCollection.length < 3) ? 1 : 3; 
      ... 
    } 
} 

날 내가 레지스터 호출의 결과 인 객체를 얻을 같은 enguire의 JS의 인스턴스의 ourCarouselCollection로 변수에 액세스 할 수 있습니다.

왜 이런 일이 발생하며 변경할 수 있습니까?

Answer 1

바인드 추가 (이 방법이 스코프와 무관 의 값은,이 실행 컨텍스트 내에서 해결되는 문제

enquire.register("screen and (max-width:900px)", { 
    match: this.ChangeSliderDown.bind(this), 
    unmatch:this.ChangeSliderUp.bind(this) 
}); 

Answer 2

해결하고 통화 또는 결합으로 설정된다. 또한, 생성자 (changeSliderUp해야하므로 ChangeSliderUp) 대문자로 시작하는 이름을 가지고 목적으로 만 함수가 호출되는 규칙이다.

T 그는 ChangeSliderUp 방법은 이이 이로 ChildCarousel의 인스턴스를 참조 호출 할 것으로 예상된다 . 당신은 같은 함수에 대한 참조 할당하는 경우 : 다음 함수가 이없이 호출됩니다

match: this.ChangeSliderDown 

이 인스턴스로 설정되어 및 전역 객체로 설정됩니다 또는 엄격 모드에서 정의되지.

당신은 Bluephlame의 대답은 당 바인드을 사용하거나 같은 폐쇄 뭔가 사용할 수 있습니다

// Assuming that this referenes an instance of ChildCarousel 
// where this code is running 
var carousel = this; 

enquire.register("screen and (max-width:900px)", { 
    match: function() {carousel.ChangeSliderDown();}, 
    unmatch: function() {carousel.ChangeSliderUp();} 
}); 

을하지만 난 그것을 테스트 할 수 없습니다. 이 함수는 인스턴스의 메서드로 호출되므로 이을 인스턴스에 설정해야합니다.