イベントリスナーで読み込んだ後に、DOMで文字を表示させたい。
DOMを使って、文字を表示させるならイベントリスナーで読み込み必要があると思いました。
そこで、下記のように書いて試してみました。
function hoge(){
this.view = function(){
window.addEventListener( 'load',this.foo, false );
}
this.foo =function(){
var txt = document.createTextNode( this.moji );
document.body.appendChild( txt );
}
}
var a =new hoge();
a.moji="テスト";
a.view();
すると、「undefined」と表示されます。
どうすればいいのでしょうか。よろしくお願いします。
No.1
- 回答日時:
クラス型オブジェクト指向言語では、
メソッド内の this は一般的に「メソッドが属するインスタンス」を表します。
ですが、クラスやメソッドが存在しない JavaScript では、
関数内の this は「関数の呼び出し元オブジェクト」を表します。
例:
obj.関数 = function(){ 処理(this) };
obj.関数(); // obj が呼び出し元なので this == obj として実行される
var 変数 = obj.関数;
変数(); // 呼び出し元がないので this == ?
変数.apply(obj); // むりやり明示したので this == obj
addEventListener の第二引数に指定する値は関数オブジェクトなのですが、
この関数オブジェクトは呼び出し元が明記されずに呼び出されるので、
関数内では this == ? となります。
(たぶんグローバルオブジェクトだとは思いますが)
というわけで、
誤)
window.addEventListener('load',this.foo, false); // foo 内では、this == ?
正)
var that = this; // この時点での this を保存
var closure = function(event){ that.foo() }; // foo 内では、this == that
window.addEventListener('load', closure, false); // closure 内では、this == ?
他にも bind や handleEvent を使った解決方法も有ります
ありがとございます。
希望通り表示されました。
しかし、まだよくわかっていません。
そこで質問が2つあります。
【質問1】
var closure = function(event){ that.foo() };
の、「event」は必要でしょうか?
var closure = function(){ that.foo() };
ではダメでしょうか。
【質問2】
addEventListenerを使わず、alert(this.moji)のような場合は問題なく表示されました。
今回のような、「var that = this; 」をするのは、
addEventListener の第二引数が、呼び出し元が明記されずに呼び出されるからでしょうか。
【お願い】
参考のために、bind や handleEvent もおしえていただけないでしょうか。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
■ 追加の質問1の回答
addEventListener の第2引数に渡した関数は、
システムから実行される際に、引数としてオブジェクトを一つ渡されます
オブジェクトの内容) http://www.w3.org/TR/DOM-Level-2-Events/events.h …
使わないのであれば引数 event を省略しても言語仕様上は問題ありません。
ただ、この関数はリスナー用である、を暗示するために書いています。
■ 追加の質問2の回答
addEventListener や onload などに指定するコールバック関数は、
一般的に呼び出し元を指定されずに実行されます。
そのため例示したクロージャー等を使った対策で「this を束縛する」のが一般的です。
■ bind を使った対策
ECMA-262 5th の新機能である Function.prototype.bind を使います
最近になって追加された機能なので、古いブラウザでは使えません
var bound = this.foo.bind(this);
window.addEventListener( 'load', bound, false );
■ EventListener インターフェース を使った対策
addEventListener の第2引数は、DOM仕様上は
「EventListener インタフェースを実装するオブジェクト」
でも大丈夫です。
参考) http://www.w3.org/TR/DOM-Level-2-Events/events.h …
ですので、ある特定のプロパティをhogeオブジェクトに追加(実装)し、
hogeオブジェクト自体を引数に渡せば、一般的なオブジェクト指向言語っぽくなります
function hoge(){
this.handleEvent = function(){ this.foo() }; // 追加
this.view = function(){ window.addEventListener( 'load', this, false ) };
}
詳しい説明をありがとうございます。
javascriptは、他の言語と比べて、thisのような独特の仕様のためいつも苦労します。
しかし、今回の回答のおかげで、「だいきらいなjavascript」から「きらいなjavascript」と、
私の中で少し昇格しました。
それでも、まだまだとっつきにくいところがたくさんあります。
これからも質問する機会が多々あると思いますが、その時はまたお願いします。
このたびは、本当にありがとうございました。
大変助かりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- オープンソース Coinmarketcap api 1 2022/05/30 15:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
イベントevt?evt.target:event....
-
ローカルのレジストリを読みたい
-
画面間でのJavaScrip...
-
javaScriptでグローバル変数に...
-
JSPの処理の途中で、JavaScript...
-
JavaScriptで ブラウザの閉じる...
-
デザイン時のVisible=Falseは実...
-
if(1){...}とはどういうことで...
-
Javascript 全角カナ+半角スペ...
-
delete[]と、delete演算子の明...
-
VBA SORT Applyでエラー
-
VC#でテキストボックスに変数の...
-
VB.NET2003 テキストボックスに...
-
ActiveXObjectについて
-
PDFフォームで条件つき金額を表...
-
CTRL + Xを無効にしたい
-
JAVAスクリプトで商品コードか...
-
jsでルートディレクトリより上...
-
正整数の半角数字かどうか判定する
-
Excel vba 配列内の最大値を求...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
Webページ中の javascript をVB...
-
jquery か javascript で json ...
-
エクセル2010のvbaについて
-
javaScriptでグローバル変数に...
-
画面間でのJavaScrip...
-
文字を移動させその位置を表示...
-
フォルダ内のファイル名を取得...
-
オライリーのプログラミングPHP...
-
ASP.NETでURLにマッピングされ...
-
CSSのクラスを動的に変更 classで
-
イベントevt?evt.target:event....
-
一定時間経つと画像を消す方法
-
クラス デフォルトプロパティの...
-
event.srcElementの動的設定
-
「リンク」と「ハイパーリンク...
-
VBAの引数の指定 カッコとイコ...
-
strictモードでなぜエラーにな...
-
JSの「document.getElementById...
-
Shell.ApplicationでのIEオブ...
おすすめ情報