以下HTMLは開いた時に'aaa'がアラートされるつもりで作りました。

※行頭は全角スペースです。
<html>
<head>
<script type="text/javascript"><!--
function hoge(){
 this.val ='aaa';
};
hoge.prototype.func = function(){
 alert(this.val);
};
h = new hoge();
if(window.addEventListener){
 window.addEventListener('load', h.func, false);
}else{
 window.attachEvent('onload', h.func);
}
//--></script>
</head>
<body>
</body>
</html>

結果は、undifindがアラートされました。
alert(this.val); を alert(h.val); とベタに記述すれば回避できますが、ちょっと違和感を感じます。

このような場合、どのような記述がベターなのでしょうか?

A 回答 (1件)

----------Sample----------


function objA(){
 this.val ='objA';
}
objA.prototype.sayval = function(){
 alert(this.val);
};
var A = new objA();
A.sayval(); //(1): 'objA'

var objA_sayval = A.sayval;
objA_sayval(); //(2): undefined

var B = {sayval:objA_sayval, val:'objB'};
B.sayval(); //(3): 'objB'

//引数を実行するだけの関数。
function run_func(f){ f(); }

run_func(objA_sayval); //(4): undefined
run_func(A.sayval); //(5): undefined

run_func(function(){A.sayval();}) //(6): 'objA'
--------Sample End--------

(1) 期待通り'objA'がアラートされる。
(2) 関数sayvalがAから切り離されるのでundefinedになってしまう。
(3) 関数sayvalがBと結びつくので'objB'がアラートされる。
 つまり .sayval の左のオブジェクトが関数sayval内でのthisになる。
(4) (2)と同じ理由でundefinedになってしまう。
(5) (4)と同じ理由でundefinedになってしまう。
 EventListenerに渡した時うまくいかないのもこのため。
(6) A.sayval();を実行するだけの関数を作ってrun_funcに渡すと期待通り'objA'がアラートされる。


今回の場合(6)の様にすればうまくいくと思いますが、
場合によってはもう一工夫必要な場合もあります。
([参考]の1つめなど)

[参考]
DOMのJavaScriptイベントハンドラは引数が固定されている、という制限を回避する方法 - IT-Walker on hatena
http://d.hatena.ne.jp/Syunpei/20070605/1181035316
prototype.jsのbindを理解する - cloned.log
http://d.hatena.ne.jp/cloned/20070301
    • good
    • 0
この回答へのお礼

Wernerさん ご回答ありがとうございます。
これで三度目のご回答です。いつもありがとうございます。

以下の様に記載する事で解決しました。

<html>
<head>
<script type="text/javascript"><!--
function hoge(){
this.val ='aaa';
};
hoge.prototype.func = function(){
alert(this.val);
};
h = new hoge();
if(window.addEventListener){
window.addEventListener('load', function(){h.func();}, false);
}else{
window.attachEvent('onload', function(){h.func();}.func);
}
//--></script>
</head>

お礼日時:2009/01/28 00:51

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ