元スレ+ JavaScript の質問用スレッド vol.76 +
JavaScript覧 / PC版 / みんなの評価 :
151 = :
>>149
酒飲んでるから適当に書くよー。
1) thisには、メソッドが呼び出すのに使用されたオブジェクトへの参照が代入される。
window.test()
この場合、testメソッド内でのthisの値は、windowオブジェクト
2) タイマー関係のメソッドは少し特別で、指定された関数をwindowオブジェクトを介して
呼び出す。つまり、呼び出された関数内でのthisの値は、windowオブジェクト。
以上の2点を踏まえたうえで、３。
3) var self = this; setInterval(function() { self.move() }, 20);
まず最初に、関数のスコープは定義時に決定される。(定義された場所のスコープ)
つまり、この無名関数からself変数にアクセスすることは可能。
そしてself変数にはthisの値、つまりboxオブジェクトへの参照が代入されている。
ここでsetIntervalの登場。先も説明したけど、この無名関数はwindowオブジェクトを
介して呼び出される。つまり、thisの値はwindow。
しかし、無名関数内部ではself変数つまりboxオブジェクトを介してmoveメソッドを呼び出している。(ここ重要！)
言い換えれば、JSのスコープチェーンの性質を利用して、現在(box内)のthisの値へアクセスする方法を確保している感じ。
分からんなら、また質問すればいいよ。おやすみ。
153 = :
>>150
>>151
>>152
なるほど、setIntervalの中でthisするとwindowオブジェクトを参照
するとは思いませんでした。4にかいてましたね。
リンク先の＞名前 box を使いまわせなるように、 this を使う、
の部分のコードで、仮にsetInterval(this.moveってやった場合、
このthisは、startからのオブジェクト、つまりboxオブジェクトを参照するのだと勘違いしてました。
（ただここで一つ疑問が・・それは一番最後で。）
setInterval自身がwindowオブジェクトからタイマー関数を使うための無名関数と、
この無名関数の中でmoveメソッドを呼び出したり、moveメソッド内のthisでboxオブジェクトを参照するために、
（thisだとwindowになってしまうので）selfで参照させているわけですね。
ここで無名関数使うことで、moveメソッド内でbox.leftやbox.elementとせずに
thisで代用しても辻褄が合うし。
リンク先のsetInterval部分に関してかなりすっきりしました。
ありがとうございました！
疑問
リンク先の＞オブジェクトを使う場合、
のところで、setInterval(this.moveとしていているのだから
window.moveとなるはずなのに？boxオブジェクトのmoveを参照できているのはどうしてなのかと。
box.start();でstart内のthisはboxオブジェクト、
setInterval内の直thisはwindowオブジェクトでいいんですよね・・
154 = :
今回質問のコードまとめ
＞オブジェクトを使う場合
var box = {
element: document.getElementById('target003'),
left: 0,
move: function() {
box.left += 4;
box.element.style.left = box.left + 'px';
if (box.left > 400) clearInterval(box.id);
},
start: function() {
this.id = setInterval(this.move, 20);
}
};
box.start();
＞名前 box を使いまわせなるように、 this を使う
var box = {
element: document.getElementById('target004'),
left: 0,
move: function() {
this.left += 4;
this.element.style.left = this.left + 'px';
if (this.left > 400) clearInterval(this.id);
},
start: function() {
var self = this;
this.id = setInterval(function() { self.move() }, 20);
}
};
box.start();
155 = :
と、考えてみたら
this.moveなので、
単にbox.moveを参照していて
setInterval(function(){ box.left～～ }, 20)
ということだったのでしょうか。もうちょっと調べてみようと思います・・
156 = :
>>155
おｋ、あってるよ。
もう気づいたかも知れないけど、上のコードの
setInterval(this.move, 20); が setInterval(function(){ this.move(); }, 20);
こうなっているとアウトね。
157 = :
>>156
ついさっきまでthis.moveのところをthis.move()的に見てしまっていました。
そしてリファレンスのsetIntervalをみてみると、
関数かコードの指定だそうで、それも踏まえて
setInterval(this.move, 20);とsetInterval(function(){ this.move(); }, 20);
の違いもわかるようになりました。
ありがとうございました！
158 = :
IE限定での話ですが・・・(現在IE8です)
HTMLの各要素のインスタンスを生成する(？)クラスの一覧、もしくはJavaScript上で
該当するすべてのクラスを列挙する方法ってありますか？
HTML画像(imgタグ)のインスタンスを生成するクラスがImageであるように
他のHTML要素も同様にHTML要素のインスタンスを生成するクラスが存在すると
思うのですが、そのクラスの名称を知りたいです
159 = :
>>158
ない。JavaScriptはプロトタイプ方式のオブジェクト指向言語で
あり、クラスという概念は本来存在しない。HTML要素のオブジェクトを
生成するのはdocument.createElementでしょ。勉強すれば。
160 = :
>>159
レスありがとう。無理なのか・・・orz
言語としてクラスが無いのは一応知っているつもりだけど便宜上使いました。以下も使わせてください
たとえば
<html><head></head><body>
<img id="A"><img id="B">
<script type="text/javascript">
Image.prototype.func01 = function(){alert("func01")};
document.getElementById("A").func01();
document.getElementById("B").func01();
</script>
</body></html>
みたいにすればimgタグのインスタンスに共通するメソッドを定義することが出来ますが
他のタグやスタイルシートで同様にインスタンスに共通するメソッドを定義する事は
不可能と言うことですか？
＃IEでDOM系のメソッドを追加を考えているのですが・・・
161 = :
>>158
標準はコレ：http://www.w3.org/TR/DOM-Level-2-HTML/
IEが標準に準拠しているかどうかは怪しいけど…
MSDNを探せば何かあるんじゃないかな。
162 = :
>>160
だからクラス方式でないのにクラス方式の用語で喋ると
考えられることも考えられなくなるってば。
ある種別の要素すべてに共通なメソッドを追加定義したい場合、
その種別の要素が共通に持つプロトタイプオブジェクトが「あれば」
そのオブジェクトに関数をプロパティとして追加すれば可能。
その「あるかどうか」「あればどれか」を探索するのには、
プロパティ __proto__ が使える環境ならそれを何段かたどって行けば
できると思われ。IE8で __proto__ が使えるのかどうかは知らん。
163 = :
ちなみに次のコードはFxでは動作したがIE7では駄目だった。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>???</title>
<script type="text/javascript">
function test() {
document.createElement("H1").__proto__.tt = function() { alert('Y'); };
document.getElementById('i1').tt();
}
</script>
</head><body>
<h1 id="i1">test...</h1>
<div><button onclick="test()">TEST</button></div>
</body></html>
164 = :
>>158
IE8限定ならできる
http://d.hatena.ne.jp/amachang/20090115/1231989477
166 = :
エリートのPHPプログラマ様が来たんだ、誰か答えてやりなさい
167 = :
どう見ても焼酎
・マウス"を"ドラッグ、ドロップするとは？
・"動的に動く"って具体的にどゆこと？
168 = :
>>164
横やりだけど、IE8でそこに書いてある
>Element.prototype.isElement = true;
とかElementが無いと言われて動かないぞ？
もっと下の方にあるHTMLDocument.～も無いと言われる
169 = :
>>168
標準モードでやってるか？
170 = :
>>169
さんきゅう。ビンゴ、デフォがIE=5だった
初回起動時に設定をいじった影響かなぁ
171 = :
>>152
＞setInterval 経由で呼び出した関数はthis=~~~~~~~ となってしまう。
それが正しいならこれはどうなる？
var si = {setInterval: window.setInterval };
si.setInterval(this.move, 20);
単にwindow（グローバルオブジェクト）がデフォルト値になるだけ
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/10_Execution_Contexts.html#section-10.2.3
＞this 値は呼出側が提供する。呼出側が提供する this 値がオブジェクトでない場合(null である場合を含む)、 this 値はグローバルオブジェクトとする。
172 = :
>>171
si.setInterval ってそもそも実行できなくね？
適当にコード作って実行しても動かなかったんだけど
var si = {setInterval: window.setInterval};
si.setInterval(function(){ document.title = new Date().toLocaleString() },20);
ちなみに↓なら問題なく動いた
window.setInterval(function(){ document.title = new Date().toLocaleString() },20)
どこか問題あったらスマン、指摘して欲しい
173 = :
と思ったらIEで動いたわ。火狐だとダメだった。なんでだろー
var si = {setInterval: window.setInterval};
si.setInterval(function(){ document.title = (this === window) },20);
こう書き換えるとthisはwindowをさしてるのがはっきり分かるな。
174 = :
windowの多くの関数がthisを見てるからじゃないのか
try{
window.setTimeout.call({}, function(){ alert("setTimeout"); }, 0);
}catch(e){
alert(e);
}
176 = :
それぐらい試せばすぐわかるだろ
180 = :
ふたつリンクを紹介してもらったみたいだけどどっちの方法を使った？
たぶんあなたのやりたいことは二つ目の方じゃないと無理だよ
181 = :
>>180
上のリンクの方でやっていました
下のリンク先の方法でチャレンジしてみます
ありがとございます！
182 = :
下の方法でもドメイン違ってできないに100ガバス。
183 = :
システムの共通部品をjavascriptで用意しているんですけど、
jsファイルの分け方って一般的にどういうふうにやりますか？
184 = :
そりゃあ一緒に使うjsはまとめて使いやすくするだろ。
jsの’共通部品’を考えればおｋ。
185 = :
なるほど、確かにそうですね。
189 = :
length = arguments.length も一度しか処理されない。
i = 0 と elements = [] が一度しか処理されないことがわかってるのに、
なんで同列に書かれてる length = arguments.length が別の動作をすると考えるんだ？
190 = :
脳内で自分が思い込んだようにプログラムを俺様解釈する典型。
191 = :
下のリンク先の方法でやってみましたが、リンク先の掲示板にもあるように正常に作動しないブラウザがありました。
で、上のリンクでもう一度やってみて、「オブジェクトがありません」とのエラーが出ますが
一応アップしてみたらIE、Firefox、Chrome、Sleipnirで動作確認できました
「オブジェクトがありません」このエラーの解決方法がありましたら教えてください。。
192 = :
そういう質問ならエラーが出る最小限の例(そのまま試せるもの)を用意して
欲しいな。
197 = :
すみません。↓をそのまま持ってきました
<style type="text/css">
html{
border:none;
}
body{
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
var iframeHeight = function(){
if(!window.parent.document) return false;
try { // !IE
document.styleSheets[0].insertRule( 'html' + '{overflow:hidden;}', document.styleSheets[0].cssRules.length );
} catch (e) { // IE
document.styleSheets[0].addRule( 'html', '{overflow:hidden;}');
}
height = document.getElementsByTagName('div')[0].offsetHeight;
window.parent.document.getElementById('sample1').style.height = height + 'px';
setTimeout('iframeHeight()',750)
}
try {
window.addEventListener('load', iframeHeight, false);
} catch (e) {
window.attachEvent('onload', iframeHeight);
}
</script>
198 = :
http://www.yomotsu.net/lab/javascripts/iframe-height
javaは全然知らないので上記のサイトを見てそのままやったつもりです
あとはインラインフレームで表示させるコンテンツの終始に<div>と</div>
インラインフレームを表示させるページに
<div><IFRAME src="http://ホームページURL" id="sample1"></IFRAME></div>
上にも書きましたが正常に動いていますが、「オブジェクトがありません」とエラーになってしまいます。
御教授お願いします…
199 = :
>>198
>>1
> 一、JavaScriptはJavaとは別物であると知っている者
200 = :
JavaScriptの実行を容易に中断する方法って無いですかね？
階層が深いところでエラーが発生してもコードを止めるのが凄く大変
raiseやexitみたいなのがあれば楽なのだが・・・
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.96 + (1001) - [97%] - 2012/1/28 23:01
- + JavaScript の質問用スレッド vol.86 + (1001) - [97%] - 2011/5/27 21:50
- + JavaScript の質問用スレッド vol.74 + (1001) - [97%] - 2009/12/1 6:08 ○
- + JavaScript の質問用スレッド vol.75 + (1001) - [97%] - 2010/1/23 1:07 ○
- + JavaScript の質問用スレッド vol.77 + (1001) - [97%] - 2010/5/8 19:06
- + JavaScript の質問用スレッド vol.78 + (1001) - [97%] - 2010/6/25 3:53
- + JavaScript の質問用スレッド vol.79 + (1001) - [97%] - 2010/9/11 6:50
- + JavaScript の質問用スレッド vol.126 + (348) - [95%] - 2023/1/12 17:00
- + JavaScript の質問用スレッド vol.126 + (952) - [95%] - 2015/11/18 13:15
- + JavaScript の質問用スレッド vol.106 + (1001) - [95%] - 2013/7/20 9:30
- + JavaScript の質問用スレッド vol.116 + (1002) - [95%] - 2014/7/1 0:45
- + JavaScript の質問用スレッド vol.136 + (1001) - [95%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.94 + (1001) - [95%] - 2012/1/8 15:46
- + JavaScript の質問用スレッド vol.81 + (1001) - [95%] - 2010/12/10 20:01
- + JavaScript の質問用スレッド vol.82 + (1001) - [95%] - 2011/1/19 7:54
- + JavaScript の質問用スレッド vol.84 + (1001) - [95%] - 2011/3/30 7:32
- + JavaScript の質問用スレッド vol.99 + (1001) - [95%] - 2012/5/7 4:32
トップメニューへ / →のくす牧場書庫について