イベントハンドラ内のthisは何を参照しているのでしょうか。

Question

(HTML)
<input type="file" id="files">

(JavaScript)
var showImages = function() {
  var inputFiles = document.querySelector("#files");
  var fileList   = inputFiles.files;
  var reader     = new FileReader();
  reader.onload  = function() {
    var dataURI = this.result;

    document.body.innerHTML += '<a href="' + dataURI
    + '"target=" blank"><img src="'
    + dataURI +'"></a>';
  };

  reader.readAsDataURL(fileList[0]);
};

var inputFiles = document.querySelector("#files");
inputFiles.addEventListener("change", showImages);

loadイベント内のthisはFileReaderオブジェクトを参照しているのでしょうか。
よろしくお願い致します。

Comments

[m.ts10806]

どこから持ってきたコードか知らないですが（自身で書いたものでないなら出典必須です）
console.log()で確認すれば明白では。

Answer 1

reader.onload  = function() {
  console.log(this)
  var dataURI = this.result;

thisが何か、console.logで出力してみると、FileReaderオブジェクトを参照しているとわかりました。

イベントを起こしているオブジェクトがthisとして参照できるんだと思います。

参考書で調べてみました。『入門　モダンJavaScirpt』p212

this(変数)は通常、関数を呼び出したオブジェクトを参照します。

いかがでしょうか。

Comments

[taka_oct092018]

返信ありがとうございます。
console.log()を使えば良かったのですね。
「入門　モダンJavaScirpt」も購入して勉強します。