Firefox 부가 기능 - 하나의 메소드에서 작동하지만 동일한 객체의 다른 메소드에서 실패 함

Question

Firefox (3.6. *) 용 애드온을 개발 중입니다. 다음 코드 notify에서 내부에서 호출 된 init이 제대로 작동하지만 onPageLoad에서 호출하면 this.notify is not a function이라고 말하는 오류가 발생합니다. 왜 그런가요?

myextobj.notify('title', 'msg')으로 전화를 변경하면 작동합니다. 변수 액세스에 대해서도 마찬가지입니다. 그렇다면 this과 개체 이름의 접두사의 차이점은 무엇입니까?

var myextobj = { 
    init: function() { 
    this.notify('init', 'We are inside init'); 
    ... 
    var appcontent = document.getElementById("appcontent"); // browser 
    if(appcontent) 
     appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true); 
    }, 
    onPageLoad: function(aEvent) { 
    this.notify('onPageLoad', 'We are inside onPageLoad'); 
    ... 
    }, 

    notify: function (title, text) { 
    Components.classes['@mozilla.org/alerts-service;1']. 
     getService(Components.interfaces.nsIAlertsService). 
     showAlertNotification(null, title, text, false, '', null); 
    } 
}; 
window.addEventListener("load", function() { myextobj.init(); }, false); 

Answer 1

이 수행 할 때

appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true); 

그냥 이벤트 핸들러로 onPageLoad에서 개최되는 함수를 추가합니다. 개체에 대한 연결이 끊어지고 실행될 때 this은 전역 개체를 참조합니다. 당신이 load 이벤트처럼

그냥 익명의 함수를 만들 :

var that = this; // capture reference to object 
appcontent.addEventListener("DOMContentLoaded", function(event) { 
    that.onPageLoad(event); 
    // myextobj.onPageLoad(event); should also work in this case 
}, true); 

---

이 기능은 자바 스크립트의 첫 번째 클래스 객체가 기억, 그들은 다른 값처럼 주위 전달 될 수 있습니다. 함수는 해당 객체에 속하지 않기 때문에 정의 된 객체에 대한 참조가 없습니다. 그것들은 다른 종류의 데이터 일뿐입니다.

는 당신이 obj.func() 다음 문맥 obj입니다 호출하는 경우. this이 실행시 결정되는 함수에 참조하고, 기능이 실행됩니다 상황에 따라 반대하지만, 당신은 전에 다른 변수에 기능을 할당하는 경우 var a = obj.func (즉, 와일드 카드 이벤트 처리기를 추가하는 것과 같습니다)를 호출 한 다음 a()을 호출하면 this은 전역 개체 (대부분 window)를 참조합니다.

Answer 2

이벤트에 대해 onPageLoad이 호출되면 'this'는 myextobj을 나타내지 않습니다. 그것은 당신의 객체 문맥에서 호출되지 않았기 때문에 myextobj입니다.

내가 처리하는 방법은 다음 규칙을 사용하여 개체의 모든 멤버 함수를 사용하는 것입니다.

var myObj = { 
    ..... 
    counter: 0, 
    ..... 
    myFunction: function() { 
    var t = myObj; 
    t.myOtherFunc(); 
    }, 

    .... 
    myOtherFunc: function() { 
    var t = myObj; 
    t.counter++; 
    } 
}; 

내가, t로 myObj 별명을하고있어 입력에 저장하고 명확한 this를 사용하여 내 의도를 만드는 방법을 참조하십시오.

this이 무엇을 의미하는지 걱정하지 않고 모든 컨텍스트에서 안전하게 메서드를 호출 할 수 있습니다. 당신이 정말로 표준 행동을 원한다면; 이 경우 call 및 apply 방법을 살펴 보시기 바랍니다.이 링크는 도움이 될 수 있습니다 : Function.apply and Function.call in JavaScript

• 것은 또한 (파이어 폭스 4에서 사용할 것) 자바 스크립트에 최근 추가보고 할 수 있습니다 다음 bind 방법 : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

• 또 다른 링크, 직접 주소를 문제는 : https://developer.mozilla.org/en/DOM/element.addEventListener#The_value_of_this_within_the_handler

Answer 3

this 추적을 잃지 않고 이벤트 리스너를 추가하는 다른 방법으로 this 자체를 전달하는 것입니다 이벤트 청취자. 그러나 함수가 항상 handleEvent으로 제한되어 있으므로 많은 리스너가있는 경우에는 유용하지 않습니다 (모든 이벤트가 모두 다른 이벤트가 아닌 경우 이벤트 유형을 전환 할 수 있음).