JavaScript 사용자 지정 개체 : 함수의 컨텍스트

Question

JavaScript에 대한 자세한 지식이 없으므로이 상황을 변경하려고합니다. 하지만 자바 스크립트 커스텀 객체 함수의 범위에 대한 어떤 논리는 저에게는 감각이 없습니다.

예 : 기본 프로젝트 템플릿의 PhoneGap 코드 (Windows Phone 7)의 일부입니다. app 객체를 생성하기위한

var app = { 
    initialize: function() { 
     this.bindEvents(); 
    }, 
    bindEvents: function() { 
     document.addEventListener('deviceready', this.onDeviceReady, false); 
    }, 
    onDeviceReady: function() { 
     app.receivedEvent('deviceready'); 
    }, 
    receivedEvent: function(id) { 
     console.log('Received Event: ' + id); 
    } 
}; 

그것은 객체 리터럴을 사용합니다. initialize 및 bindEvents 함수가 app 개체 범위에서 실행되는 것으로 파악됩니다. 그러나 onDeviceReady 범위는 무엇입니까?

console.log(this == document);\\out: false 

Answer 1

당신의 문제가 여기에 무슨 일이 일어나고 :

나는 onDeviceReady의 내부에 다음 코드를 작성하려고

방법 onDeviceReady가 이벤트 이미 터에 의해 불려

document.addEventListener('deviceready', this.onDeviceReady, false); 

, 그것은으로 설정 컨텍스트 document입니다. 리스너가 연결되어 있기 때문입니다.

당신은 사용하여 수정할 수 있습니다

document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); 

또는 이전 버전의 브라우저를 지원하는 솔루션을 :

var self = this; 
document.addEventListener('deviceready', function() { 
    self.onDeviceReady.apply(self, arguments); 
}, false); 

---

당신이 크로스 브라우저 _.bind을 사용할 수 있습니다 밑줄 유틸리티 라이브러리를 사용하는 경우 :

document.addEventListener('deviceready', _.bind(this.onDeviceReady.bind, this), false);