基本的なことかもしれませんが、ご質問させてください。
下記のコードの部分が理解が及びません。
reader.onload =(function(theFile) {
return function(e) {......(中略)})(f);
- まだ、初心者なので、object.property=fucntion(){}
のようなドット演算子と代入演算子に使用したコードは特定のオブジェクトにプロパティ(今回の場合はメソッド)を新規に定義(格納)する行為であると理解しております。例えば、obj.a="hoge";と言った感覚で、objオブジェクトにaプロパティを定義しましたというイメージです。
しかしながら、mozillaのマニュアルを読むとonloadプロパティは既にFileReaderオブジェクト(またはreaderインスタンス)に存在しており、既に存在しているプロパティに上書きしているということなのでしょうか。
マニュアル
マニュアルを読みましてもピンとこないのですが、FileReaderオブジェクトのような特定のクラスのプロパティは指定のプロパティ(onload)に特定の何かを格納すれば、新規プロパティの定義以上に特別な意味を持つことがあるのでしょうか?
うまく言葉で説明ができないのできず申し訳ございませんが、
なぜ、特定のオブジェクト(クラス)のプロパティを再定義(格納)するだけで、
特別な処理を実行するのかが、直感できに理解できないということになります。
addEventListnerの第二引数に、新しい要素を生成する
JavaScript
1 <script> 2 function handleFileSelect(evt) { 3 var files = evt.target.files; // FileList object 4 5 // Loop through the FileList and render image files as thumbnails. 6 for (var i = 0, f; f = files[i]; i++) { 7 console.log(f.type); 8 9 // Only process image files. 10 if (!f.type.match('image.*')) { 11 continue; 12 } 13 var reader = new FileReader(); 14 15 // Closure to capture the file information. 16 reader.onload = (function(theFile) { 17 return function(e) { 18 // Render thumbnail. 19 var span = document.createElement('span'); 20 span.innerHTML = ['<img class="thumbnail" src="', e.target.result, 21 '" title="', escape(theFile.name), '"/>'].join(''); 22 document.getElementById('list').insertBefore(span, null); 23 }; 24 })(f); 25 // Read in the image file as a data URL. 26 reader.readAsDataURL(f); 27 } 28 } 29 document.getElementById('files').addEventListener('change', handleFileSelect, false); 30 </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/04 01:39