以下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); とベタに記述すれば回避できますが、ちょっと違和感を感じます。

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

このQ&Aに関連する最新のQ&A

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に関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

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

このQ&Aと関連する良く見られている質問

Q花関連のイベント(関東)について

花関連のイベントについて、お伺いさせてください。

昨年、関東で開催された「国際バラとガーデニング・ショウ」を見に行って以来、花のイベントにまた行きたいと考えております。

関東近辺で、今年、おすすめの花イベントがありましたら、ご教示ください。よろしくお願いいたします。(東京ドームの蘭展には、行く予定です)

Aベストアンサー

こんにちは

関東ではないところもありますが
http://www.hananokai.or.jp/c/c3104.html

http://www.hananokai.or.jp/b/b6100.html

http://www.barakai.com/event/index.html

http://www.ikenobo.jp/event/2010/kengesai2010/kenge100114.html

http://www.nfd.or.jp/

http://www.botanical-gf.jp/

http://www.jtb.co.jp/ticket/event.asp?id=244836

参考URL:http://www.expo90.jp/

Qprototypeの中のthis.★★は宣言?

下記で、property1はどこに存在しているのでしょうか?
・Hoge? それとも、Hoge.prototype?
・宣言していなければ自動的に作成される? それともHogeまで遡る?
・そもそも、this.property1はどういう意味でしょうか? これで宣言?

Hoge.prototype = {
 method1: function(){
  this.property1 = true;
 }
}

Aベストアンサー

(1)
> 下記で、property1はどこに存在しているのでしょうか?
> ・Hoge? それとも、Hoge.prototype?

method1 を呼び出す時の呼び出し方によって this が変わります。具体的には■■.method1() と呼び出した時、this は ■■ となります。通常は

var hogeInstance = new Hoge;
hogeInstance.method1(); // …(i)

などと呼び出しますので、this は hogeInstance になります。つまり、this.property1 は hogeInstance.property1 という事です。所で、もし仮に

Hoge.prototype.method1(); // …(ii) 普通はしない

とすると this は Hoge.prototype になりますので、this.property1 は Hoge.prototype.property1 を意味する事になります。普通はこの様な使い方はしませんが。また、

Hoge.method1(); // …(iii) Error

の様な呼び出し方はできません。従って、普通の使い方 (i) をしている限りは、hogeInstance.property1 などを意味すると考えて下さい。

因みに、以下の3つは全て異なる物ですので区別して下さい。
・Hoge
・Hoge.prototype
・hogeInstance などの様な Hoge のインスタンス (つまり、new Hoge で作成したオブジェクト)


(2)
> ・宣言していなければ自動的に作成される? それともHogeまで遡る?

hogeInstance.property1 が定義されていない時、
・値を読み出す時は Hoge.prototype.property1 が代わりに読み出されます。(Hoge.prototype.property1 も定義されていなければ undefined)
・値を代入する時は hogeInstance.property1 が新しく自動的に定義され、そこに値が設定されます。


(3)
> ・そもそも、this.property1はどういう意味でしょうか? これで宣言?
「this に入っているオブジェクトの property1 という名のプロパティ」という意味です。宣言ではありません。

※オブジェクトのメンバは明示的に宣言する事はありません。強いて言うならば代入の際に自動的に定義されます。従って、this.property1 = ~; と書いた時点で、未だ property1 メンバが this に定義されていなければ自動的に定義されるという事です。そういう意味で言えば "宣言+代入 と似たような効果" を持っているとも言えるかも知れません。"宣言" とは呼びませんが。

(1)
> 下記で、property1はどこに存在しているのでしょうか?
> ・Hoge? それとも、Hoge.prototype?

method1 を呼び出す時の呼び出し方によって this が変わります。具体的には■■.method1() と呼び出した時、this は ■■ となります。通常は

var hogeInstance = new Hoge;
hogeInstance.method1(); // …(i)

などと呼び出しますので、this は hogeInstance になります。つまり、this.property1 は hogeInstance.property1 という事です。所で、もし仮に

Hoge.prototype.method1(); // …(ii) 普通はしない

と...続きを読む

Q関東の東京近郊にあるローカル線、関東鉄道竜ヶ崎線が110周年ですが、イベント列車に乗車しましたか?

「特に関東の乗り鉄の方にお聞きします」
{
関東の東京近郊にあるローカル線、関東鉄道竜ヶ崎線が110周年ですが、イベント列車に乗車しましたか?
}
}
}

}

Aベストアンサー

もっとイベントとかで宣伝すればいいのに

Q【Javascript】Cookie値の取得

"K16.ver=test"のtestを取得する方法を分かりやすく教えて下さい!

できれば値だけ取得する方法を教えて下さい。

Aベストアンサー

ライブラリをつかわずにcookieを利用するなら、set、get、del用の
関数を独自で用意した方がよいでしょう
ざっと書くとこんな感じです。
(setCookieについては生存期間を任意に設定したいなら適当に拡張してください)
<script>
function setCookie(key,val,url){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
if(url){
tmp += "domain="+getDomain(url)+";";
tmp += "path="+getDomainPath(url)+";";
}
document.cookie = tmp;
};
function getCookie(key){
tmp = document.cookie+";";
tmp1 = tmp.indexOf(key,0);
if(tmp1 != -1){
tmp = tmp.substring(tmp1,tmp.length);
start = tmp.indexOf("=",0);
end = tmp.indexOf(";",start);
return(unescape(tmp.substring(start+1,end)));
}
return("");
};

function delCookie(key){
expiredate = new Date();
expiredate.setYear(expiredate.getYear()-1);
tmp = key+"=;";
tmp += "expires="+expiredate.toGMTString();
document.cookie = tmp;
};
</script>
<input type="text" name="hoge" id="hoge">
<input type="button" value="set" onclick="setCookie('K16.ver',document.getElementById('hoge').value)"><br>
<input type="button" value="check" onclick="console.log(getCookie('K16.ver'))">
<input type="button" value="del" onclick="delCookie('K16.ver')"><br>

ライブラリをつかわずにcookieを利用するなら、set、get、del用の
関数を独自で用意した方がよいでしょう
ざっと書くとこんな感じです。
(setCookieについては生存期間を任意に設定したいなら適当に拡張してください)
<script>
function setCookie(key,val,url){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
if(url){
tmp += "domain="+getDomain(url)+";";
tmp += "path="+getDomainPath(url)+";";
}
document.cookie = tmp;
};
function getCo...続きを読む

Q関東で日本酒のイベントに行きたい!!

日本酒のイベントに行きたいのですが、
ネットで調べても、見つかりません…

関東で日本酒のイベントがありましたら教えて下さい。

お願いいたします☆

Aベストアンサー

http://www.meimonshu.jp/
ポン酒うめーのうwwwwうめーのうwwwww
俺もたまに行くからよろしくのうwwww

Q【javascript 文法】値渡し?参照渡し?

以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script type="text/javascript"><!--
var gDown= false;

var div = document.createElement('div');
div.id = 'AAA';
div.innerHTML = 'AAA';
document.body.appendChild(div);

Event.observe(div, 'mousedown',function(){
gDown = div;
});

var div = document.createElement('div');
div.id = 'BBB';
div.innerHTML = 'BBB';
document.body.appendChild(div);

Event.observe(div, 'mousedown',function(){
gDown = div;
});

Event.observe(document, 'mouseup',function(){
alert(gDown.id);
gDown=false;
});
//--></script>
</body>
</html>

javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって
参照渡し?それとも値渡し? と混乱しています。

この辺のところを、教えてください。お願いいたします。

以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script type="text/javascript"><!--
var gDown= false;

var div = document.createElement('div');
div.id = 'AAA';
div.innerHTML = 'AAA';
document.body.appendChild(div);

Event.observe(div, 'mousedown',function(){
gDown = div;
});

var div = document.createElement('div');
div.id = 'BBB';...続きを読む

Aベストアンサー

オブジェクト(関数、配列etc..)の場合は参照渡しとなります。
observeの第三引数では関数オブジェクトを渡しているのでコードの実行は実際にイベントが発生した時に行われます。

Q関東近郊で 面白いイベント・町おこし・お祭りなど。

関東近郊で 面白いイベント・町おこし・お祭りなど。
町おこし目的で、バカバカしいことを大真面目にやっていたり、
ギネスブックに挑戦するなど、
みんなが一緒に参加できるような
面白いイベントを教えてください。
出来れば関東近郊で、秋10月~11月あたりに
行っているものがいいです。
バカバカしいように見えて、
でも真剣なところが面白い・・みたいなもの。
伝統的なお祭りでも良し、
町おこし目的で数年前から行われているものでも結構です。
関東近郊が良いですが、
参考にこういったものもある!という回答でしたら、
全国問わず教えて頂きたいと思います。
宜しくお願い致します。

Aベストアンサー

時期が合わない(先日終わった)のですが、
栃木県真岡市、のイカダレース。
速さを競っているのではありません。デザインを競っています。

http://www.net-tochigi.com/ittekita/mookaikada/ikada.html

どこかの工場の研修生(褐色人種)+何人かの日本人が、褐色人種国の民族衣装を着て川下りをしたことがあります。イカダ本体ではなく衣装(当然体に色々塗って褐色人種のような肌色に)に凝ったために選外になったようです。

Q【FireFox】 javascript で 設定値の取得方法

FireFoxでjavascriptからconfigの値を設定するには以下の様にしますが、

user_pref("network.http.connect.timeout" , 50);

javascriptから値を取得するにはどうしたら良いのでしょうか?

因みに、alert(network.http.connect.timeout); はエラーでした。

よろしくお願いいたします。

Aベストアンサー

> https://developer.mozilla.org/Ja/Code_snippets/Preferences

<script type='text/javascript'>
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
.getService(CI.nsIPrefService);
console.info(prefs);
</script>

を実行すると、

----
Permission denied to get property XPCComponents.classes
----

とのエラーが返ってきました。
「アクセス権がない」ということなので無理だと思います。

GreaseMonkeyなら特権モードでアクセスできるかもしれませんが。(未検証)

Q楽天市場の明日以降のポイントアップイベントについて

楽天市場で少し高額の買い物をしようと思ってます。
そこで、少しでもポイントを貰いたいと思っているのですが、今開催中のポイントアップイベントの情報しかないので、明日以降今よりたくさんポイントがもらえるイベントが始まるのではないかと思ってしまって買い時に悩んでいます。
楽天市場で明日以降のポイントアップイベントの情報ってわからないものなのでしょうか。

Aベストアンサー

以前見た気がしたので探して見ました。

それらしいサイトがありましたよ。
30倍のキャンペーンもあるようですが、条件が厳しいと思うので
今がお買い得のようですね。

http://www.kyeynet.com/rakup/
http://rakuten-buy.info/

Qfunctionの値を別のfunction へ

set_hidukeで取得した「true」を
hiduke_chkにもっていく方法を教えていただけないでしょうか。

<SCRIPT language=JavaScript>
function set_hiduke(){
var hiduke_input = true
}
function hiduke_chk(){
if(hiduke_input==true)
alert("日付をいじった?")
}
</SCRIPT>

<FORM NAME=main ACTION="★" METHOD="POST" onSubmit="return hiduke_chk()">

<INPUT TYPE="TEXT" NAME="年月日" SIZE="12" onBlur="set_hiduke();">
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></form>

Aベストアンサー

関数の中で var 宣言した変数は、その関数の中だけでしか使えません。
ですので、

<SCRIPT language=JavaScript>
var hiduke_input = false;
function set_hiduke() {
  hiduke_input = true;
}
function hiduke_chk() {
  if (hiduke_input)
    alert("日付をいじった?")
}
</SCRIPT>

のように、宣言を外に出せばOKです。


人気Q&Aランキング