FileReaderクラスのonloadプロパティについて

Question

基本的なことかもしれませんが、ご質問させてください。
下記のコードの部分が理解が及びません。
reader.onload =(function(theFile) {
return function(e) {......(中略)})(f);

1. まだ、初心者なので、object.property=fucntion(){}

のようなドット演算子と代入演算子に使用したコードは特定のオブジェクトにプロパティ（今回の場合はメソッド）を新規に定義（格納）する行為であると理解しております。例えば、obj.a="hoge";と言った感覚で、objオブジェクトにaプロパティを定義しましたというイメージです。

しかしながら、mozillaのマニュアルを読むとonloadプロパティは既にFileReaderオブジェクト（またはreaderインスタンス）に存在しており、既に存在しているプロパティに上書きしているということなのでしょうか。
マニュアル
マニュアルを読みましてもピンとこないのですが、FileReaderオブジェクトのような特定のクラスのプロパティは指定のプロパティ（onload）に特定の何かを格納すれば、新規プロパティの定義以上に特別な意味を持つことがあるのでしょうか？

うまく言葉で説明ができないのできず申し訳ございませんが、
なぜ、特定のオブジェクト（クラス）のプロパティを再定義（格納）するだけで、
特別な処理を実行するのかが、直感できに理解できないということになります。
addEventListnerの第二引数に、新しい要素を生成する

  <script>
      function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
					console.log(f.type);

          // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }
          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              // Render thumbnail.
              var span = document.createElement('span');
              span.innerHTML = ['<img class="thumbnail" src="', e.target.result,
                                '" title="', escape(theFile.name), '"/>'].join('');
              document.getElementById('list').insertBefore(span, null);
            };
          })(f);
          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
        }
      }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>

Answer 1

FileReaderクラスのonloadプロパティは、イベント発生時(onloadだとファイルの読み込みが終わった時)に呼び出すコールバック関数を保持するプロパティです。

普通のプロパティと違っているのは、プロパティの内容がオブジェクトや値ではなく関数である事です。
また、コールバック関数が普通の関数と違っているのは、その呼び出しが、プログラム中の指定ではなく、イベントの発生によって行われる事です。

FileReaderクラスで定義されているコールバック関数のプロパティには、以下のようなものがあります。

onloadstart

ファイルの読み込みを開始したとき。
onprogress
ファイルの読み込みが進行したとき。（何度も発生する可能性があります）
onabort
ファイルの読み込みが中断したとき（後述）。
onerror
ファイルの読み込みに失敗したとき。
onload
ファイルの読み込みが正常に最後まで完了したとき。
onloadend
ファイルの読み込みが終了したとき（失敗した場合も含む）。

＝＝＝
「onloadプロパティは既にFileReaderオブジェクト（またはreaderインスタンス）に存在しており、既に存在しているプロパティに上書きしているということなのでしょうか」
その通りです。何のために、何を上書きしているのかは上に書いた通りです。

「特定のオブジェクト（クラス）のプロパティを再定義（格納）するだけで、特別な処理を実行するのか」
FileReaderクラスが、そのように作られているからと納得するしかないと思います。
動作を理解する上で注意したいのは、特別な処理（ファイルを読出し終わったら、onloadプロパティに設定されたコールバック関数を呼び出す）はFileReaderクラスが本来持っている機能(動作)であって、onloadプロパティへ代入する事で新たな機能が追加された/発現したという訳ではないことです。

Comments

[SugiuraY]

ご回答有難うございます。
大変よく分かりました。これも少し抽象的な理解の確認になってしまうかもしれませんが
FileReaderオブジェクト（又はそこから生成されたインスタンス）のプロパティには、this.onload＝XXX;のような仕組みが備わっている、つまり特定の名称のプロパティ（この場合にはonload）にコールバック関数として機能する処理が備わっているというオブジェクトの構造という理解で大きく相違しないでしょうか。
例えば
function morning () {
var a;
alert(this.a);
}
var cls = new morning();
cls.a="Good Morning!";
//つまり cls.a="Good Morning!";は新たにclsインスタンスにプロパティを定義しているのみならず、当該インスタンスにthis.aがあることで、alertにより表示する機能が備わっている。従って、このオブジェクトを使用する我々は常にcls.aに格納することさえ知っていれば機能するような仕組み？