Firefoxアドオン - `this`はあるメソッドでは動作しますが、同じオブジェクトの別のメソッドでは失敗します

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); 

---

を関数はJavaScriptでファーストクラスのオブジェクトであることを忘れないでください、彼らは他の値のように周りを渡すことができます。関数は、そのオブジェクトに属していないので、定義されているオブジェクトへの参照はありません。彼らはもう一つの種類のデータです。

thisは、関数内でを参照するオブジェクトこれには、実行時に決定し、機能がで実行され文脈に依存します。あなたはobj.func()を呼び出す場合、コンテキストがobjですが、前に別の関数を変数に割り当てるとされます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++; 
    } 
}; 

入力するとクリアthisを使用しての私の意図を作ることに節約するために、私はtとしてmyObjをエイリアシングてるか、参照してください。

thisが参照していることを心配することなく、任意のコンテキストからメソッドを安全に呼び出すことができます。あなたは本当に標準的な振る舞いが必要な場合を除きます。その場合、callとapplyの方法を見たいかもしれません。このリンクは役立つかもしれない：Function.apply and Function.call in JavaScript

• あなたはまた、（FireFoxの4で利用可能になります）JavaScriptに最近追加さを見てみたいことがあり：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と呼ばれているという点で制限があるので、多くのリスナーを持っている場合はそれほど有用ではありません（イベントのタイプを切り替えることができます）。