JavaScriptでは(同様の構文を持つ他のほとんどの言語とは異なり)、関数が定義されている場所ではなく、関数が呼び出される方法this
によって完全に定義されます。関数内でのイベントハンドラーの呼び出し方法は、オブジェクトを参照しません。this
次の3つの方法で修正できます。
ES5対応のブラウザをターゲットにしている場合、またはES5の「シム」を含む場合は、次を使用しますFunction#bind
。
var Obj = {
el : document.getElementById,
doSomething : function(){ this.el.property = "value" }
};
Obj.el.addEventListener('click', Obj.doSomething.bind(Obj));
それ以外の場合は、クロージャーを使用します。
var Obj = {
el : document.getElementById,
doSomething : function(){ this.el.property = "value" }
};
Obj.el.addEventListener('click', function(event) {
return Obj.doSomething(event);
});
RobGがコメントで指摘したように、オブジェクトは1つ Obj
しかないため(コンストラクター関数や、必要に応じて複数を作成するものではなく)、次Obj
ではなく変数()を使用してそのオブジェクトを参照できthis
ます。
var Obj = {
el : document.getElementById,
// Obj instead of this ---v
doSomething : function(){ Obj.el.property = "value" }
};
Obj.el.addEventListener('click', Obj.doSomething);
これは、オブジェクトが定義されているスコープ内で1回限りの場合にのみ機能します(これはあなたのObj
例に当てはまります)。あなたがそれに対して持っている唯一の参照がthis
(例えば、あなたが持っていなかったObj
)であるならば、あなたはこれをすることができず、前の2つのオプションのうちの1つが欲しいでしょう。
もっと:
ただし、あなたのel
財産は疑わしいことに注意してください。あなたはそれを次のように定義しました
el : document.getElementById,
...これは、関数el
を指していることを意味します。それはおそらくあなたがやろうとしていたことではありません。おそらく、次のように取得したDOM要素を参照することを意図していました。 getElementById
el
getElementById
el : document.getElementById("someIdValue"),
詳細はこちら。