addeventListener 및 이것의 범위

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

  •  05-07-2019
  •  | 
  •  

문제

내가 제공 한 JavaScript API를 통해 조작 할 수있는 타사 플래시 객체가 있습니다. 나는이 객체의 이벤트를 듣고 내 물건 내부의 이벤트를 발사하여 이벤트를 더욱 거품이 내립니다. 나는 Ext JS를 사용하고 있지만 여기서는 중요하다고 생각하지 않습니다.

샘플 코드

this.chart.addEventListener('create', function() {
    this.fireEvent('created');
}, false)

내 문제는 익명 함수 내부의 '이'가 이벤트를 시작하려는 내 객체보다는 이벤트를 발사 한 객체를 말한다는 것입니다.

또 다른 범위 문제. 도움을 주셔서 감사합니다.

도움이 되었습니까?

해결책

이것은이 문제에 대한 전형적인 접근법입니다 :-

(function(self) {
  self.chart.addEventListener('create', function() {self.fireEvent('created');}, false);
})(this);

다른 팁

'이'객체를 참조하기 전에 외부 변수를 만드는 것은 어떻습니까? 예를 들어:

var _this = this;
this.chart.addEventListener('create', function() { _this.fireEvent('created'); }, false)

다른 답변은 필요한 것을 달성하지만 가장 효율적으로 (확장 가능한) 방식으로 작동하지 않습니다. 궁극적으로보기 객체를 분리하지 않기 때문입니다 (this.chart) 그 견해의 논리에서 (fireEvent()). MVC 응용 프로그램에서 이러한보기 "결정"은 제어 장치. 컨트롤러 "제어" 견해 뷰가 액세스 할 수있는 모든 API를 포함해야합니다.

당신의 예에서 this 컨트롤러이며 괜찮습니다 (올바른 장소에 리스너를 추가하는 것을 의미합니다). 실제로해야 할 일은 핸들러를 "취급"을 수행 해야하는 범위에 묶는 것입니다. this:

// `this` is the controller of `chart`
this.chart.addEventListener('create', function() {
    this.fireEvent('created');
}.bind(this));

이 페이지의 다른 답변이 수행 한 작업은 귀하의보기가 자체 컨트롤러가되도록 만들어 지지만 "Create Create '이벤트를 처리하는 동안에 만"컨트롤러 "를 사용하여 임시 참조를 할당하여 이벤트를 처리하는 동안에 만 가능합니다. var self = this. 다시 말하지만, 이것은 잘 작동하지만 이벤트 중심 응용 프로그램에서는 규모가 잘 작동하지 않으며 처리 할 이벤트가 많으면 실제로 의미가 없습니다.

.bind() ECMAScript 5 구현입니다. 오래된 브라우저에서 작업 해야하는 경우 여기에 설명하는 좋은 방법이 여기에 설명되어 있습니다. functions 그리고 .call()): https://developer.mozilla.org/en-us/docs/javascript/reference/global_objects/function/bind

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top