thisの値が分かりません。

Question

１２行目のthisはxhrオブジェクトを指しているのでしょうか。
よろしくお願い致します。

「HTML5 プロフェッショナル認定試験レベル２ スピードマスター問題集 P227 問6-11」より。

<form id="fm" method="POST">
  <input type="file" name="file">
</form>
<button>send file</button>
<script>
  window.onload = function() {
    document.querySelector("button")
      .addEventListener("click", function() {
      var xhr  = new XMLHttpRequest();
      var form = new FormData(document.getElementById("fm"));
      xhr.addEventListener("load", function() {
        console.log(this.response);
      });
      xhr.open("post", "/upload");
      xhr.send(form);
    });
  };
</script>

Answer 1

１２行目のthisはxhrオブジェクトを指しているのでしょうか。

その通りです。

• MDN | EventTarget.addEventListener()

ドキュメントにも以下のような記載があります。

addEventListener() を使って要素にハンドラー関数を設定したとき、ハンドラーの中の this の値は要素への参照となります。

Comments

[taka_oct092018]

nekoniki様
詳細な返信ありがとうございます。

Answer 2

thisはxhrオブジェクトを指している

そうですね。console.log(this)で検証するとわかると思います

Comments

[taka_oct092018]

yambejp様
いつも回答ありがとうございます。