###前提・実現したいこと
プログラミングの勉強を始めたばかりの初心者です。
勉強として,html5/JavaScriptで,ブラウザにテキストファイルをドラッグ&ドロップして表示するプログラムを書いています。
###発生している問題
ドラッグ&ドロップの部分をクラスとして切り出せないかと考え,以下のようなコードを書きました。インスタンス生成時に渡した文字列を関数名として,ドロップされたファイルのFileListオブジェクトを渡せれば,毎回ドラッグ&ドロップの部分のコードを書かなくていいのではないか?と考えたからです(できるのか?という意味も込めて試してみました)。
下記のコードでFileListオブジェクトを得るところまではうまくいっている(ように見える)のですが,その次のconsole.log(this.func)の部分で,constructorでセットしたthis.funcが見えません(undefinedになります)。ブラウザの開発者ツールのコンソールから dd.func を見ると,dnd {func: "func"} と表示されます。なぜdroppedメソッドの中からだと見えないのか,見えないのになぜそこにたどり着くまではうまく動く(ように見える)のか,がよく理解できずに悩んでおります。ご教示願えれば幸いです。
###該当のソースコード
javascript
1class dnd { 2 constructor (func){ 3 this.func = func; 4 document.addEventListener('dragover', this.dragOver, false); 5 document.addEventListener('dragleave', this.dragLeave, false); 6 document.addEventListener('drop', this.dropped, false); 7 } 8 dragOver (event){ 9 event.stopPropagation(); 10 event.preventDefault(); 11 } 12 dragLeave (event){ 13 //とりあえず何もしない 14 } 15 dropped (event){ 16 event.stopPropagation(); 17 event.preventDefault(); 18 this.files = event.dataTransfer.files; 19 console.log(this.files); 20 //FileListオブジェクトが見えます 21 console.log(this.func); 22 //undefinedになります 23 //eval(this.func + '(' + this.files + ')'); 24 } 25} 26 27function func (files){ 28 //FileListオブジェクトを渡したい関数 29} 30 31let dd = new dnd('func');
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/10 11:45
2017/03/10 19:38
2017/03/11 04:36